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，鼠标还是会监听这个子元素的。