css屏蔽元素的鼠标事件pointer-events_html/css_WEB-ITnose
程序员文章站
2022-04-28 17:42:04
...
// 屏蔽点击
$('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(''+_msg+''); } 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,鼠标还是会监听这个子元素的。
下一篇: C#获取当前页面的URL示例代码
推荐阅读
-
如何在blur或focusout事件里得到即将得到焦点的元素?另外这两个事件有什么区别?_html/css_WEB-ITnose
-
怎么用css属性屏蔽鼠标事件(鼠标点击可穿透上层元素)
-
关于鼠标进入、离开、点击事件的问题_html/css_WEB-ITnose
-
关于鼠标进入、离开、点击事件的问题_html/css_WEB-ITnose
-
屏蔽移动端浏览器的长按事件_html/css_WEB-ITnose
-
屏蔽移动端浏览器的长按事件_html/css_WEB-ITnose
-
如何将 html 中 的鼠标hover事件,改为 鼠标点击事件_html/css_WEB-ITnose
-
[转]jquery append 动态添加的元素事件on 不起作用的解决方案_html/css_WEB-ITnose
-
如何在blur或focusout事件里得到即将得到焦点的元素?另外这两个事件有什么区别?_html/css_WEB-ITnose
-
[转]jquery append 动态添加的元素事件on 不起作用的解决方案_html/css_WEB-ITnose