// 屏蔽点击
$('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，鼠标还是会监听这个子元素的。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1021
