css屏蔽元素的鼠標事件pointer-events

// 屏蔽點擊

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

//恢復默認

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

 

用處：

　　 可以在彈出層的時候或者fixed定位時，設置下面元素的鼠標事件

 

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點擊事件。 這樣一來不用去給body臨時綁定事件和去除事件綁定。

pointer-events 的多個狀態值

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

 不過在瀏覽器中   auto 和 none 就可以了

auto：效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。。

none：元素不再是鼠標事件的目標，鼠標不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設置了pointer-events為其它值，比如auto，鼠標還是會監聽這個子元素的。