CSS は要素のマウスイベントをシールドします pointer-events_html/css

CSS は要素のマウスイベントをシールドします pointer-events_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:28:47

オリジナル

2024 人が閲覧しました

// クリックをブロック

$('body').css('pointer-events', 'none');

// デフォルトに戻す

$('body').css('pointer -events', 'auto');

用途:

レイヤーをポップアップするとき、または位置を固定するときに、次の要素のマウスイベントを設定できます

var pop = function(msg, delay, cb) {        var _msg = msg || '网络不给力，请稍后再试试吧',            _delay = delay || 3000;        if($('#pop').hasClass('hide')) {            $('#pop').removeClass('hide')        }        if($('#pop').length > 0) {            $('#pop').html(_msg);        } else {            $('body').append('<div id="pop">'+_msg+'</div>');        }        setTimeout(function() {            $('#pop').addClass('hide');            cb && cb()        }, _delay)    }

ログイン後にコピー

上記は一つです単純に吐き出す分割効果（テキストが中央に表示され、3秒後に自動的に消えます）

表示期間中は、以下のbody要素がクリックイベントをブロックします

消えた後、bodyクリックイベントが復元されます。これにより、イベントを一時的に本体にバインドしたり、イベントバインディングを削除したりする必要がなくなります。

ポインターイベントの複数の状態値

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

ログイン後にコピー

ただし、ブラウザでは auto と none で十分です

auto: 効果は pointer-events 属性を定義しないのと同じで、マウスはポインターイベント属性を貫通しません現在のレイヤー。。

none: 要素はマウスイベントのターゲットではなくなり、マウスは現在のレイヤーではなく、下のレイヤーの要素をリッスンします。ただし、その子要素が pointer-events を auto などの他の値に設定した場合でも、マウスは引き続きこの子要素を監視します。

CSS は要素のマウス イベントをシールドします pointer-events_html/css_WEB-ITnose

CSS は要素のマウスイベントをシールドします pointer-events_html/css_WEB-ITnose