// 屏蔽点击
$('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,鼠标还是会监听这个子元素的。

css屏蔽元素的鼠标事件pointer-events的更多相关文章

  1. selenium的元素定位-鼠标事件

    鼠标事件 ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 ActionChains 中存储的行为: context_click(): 右击: double_cl ...

  2. css3 -阻止元素成为鼠标事件目标 pointer-events

    pointer-events:auto|none 其中pointer-events:none:元素永远不会成为鼠标事件的target. <!DOCTYPE html> <html l ...

  3. Selenium(十):用By定位元素、鼠标事件、键盘事件

    1. 用By定位元素 除了前面介绍的单位方法,WebDriver还提供了另外一套写法,即统一调用find_element()方法,通过By来声明定位的方法,并且传入对应定位方法的定位参数.具体如下: ...

  4. 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...

  5. 转【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    /*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask&q ...

  6. pointer-events属性屏蔽鼠标事件(点击穿透上层元素)

    应用场景 我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的 ...

  7. (转)CSS3之pointer-events(屏蔽鼠标事件)属性说明

    我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的. 但有时 ...

  8. css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件

    引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...

  9. Opencv处理鼠标事件-OpenCV步步精深

    在图片上双击过的位置绘制一个 圆圈 鼠标事件就是和鼠标有关的,比如左键按下,左键松开,右键按下,右键松开,双击右键等等. 我们可以通过鼠标事件获得与鼠标对应的图片上的坐标.我们通过以下函数来调用查看所 ...

随机推荐

  1. [原创]用windows7连接windows2003的终端服务器时,出现"由于这台计算机没有远程桌面客户端访问许可证,远程会话被中断"的问题

    用windows7连接windows2003的终端服务器时,出现"由于这台计算机没有远程桌面客户端访问许可证,远程会话被中断"的问题,原因是终端服务器授权方式设置为了"每 ...

  2. Java笔记:Number

    序号 方法与描述 1 xxxValue()将number对象转换为xxx数据类型的值并返回. 2 compareTo()将number对象与参数比较. 3 equals()判断number对象是否与参 ...

  3. java垃圾回收机制

    1 .垃圾回收机制(GC)垃圾回收就是回收内存中不再使用对象:(1)垃圾回收的步骤:1)查找内存中不再使用的对象:2)释放这些对象所占用的内存:(2)查找内存中不再使用的对象方法:1)引用计数法如果一 ...

  4. 手把手教你玩转nginx负载均衡(一)----使用vitualBox创建虚拟机

    引言 作为一个web程序员,有时候需要想尽办法来利用有限的资源来产生最大程度的负载,除了提高硬件配置,增加带宽之外,CDN加速,DNS加速,缓存,还可以利用反向代理.但是要说反向代理,就不的不说ngi ...

  5. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  6. c#3.0新特性

    1.自动属性 public int ID { get; set; } // 上面的ID属性(自动属性)等同于下面的ID属性 // private int _id; // public int ID / ...

  7. JDBC URL FOR ORACLE, wrong or correct, how do you know? ORA-12505

    JDBC URL FOR ORACLE, wrong or correct, how do you know? INSTANCE SID by ":" jdbc:oracle:th ...

  8. [Spring] AOP, Aspect实例解析

    最近要用到切面来统一处理日志记录,写了个小实例练了练手: 具体实现类: public interface PersonServer { public void save(String name); p ...

  9. MySQL开发规范

    字段设计 (1)建议使用UNSIGNED存储非负数值. (2)建议使用INT UNSIGNED存储IPV4. (4)INT类型固定占用4字节存储,例如INT(4)仅代表显示字符宽度为4位,不代表存储长 ...

  10. 用Redis实现Session功能

    0.什么是Redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API ---维基百科 1.与其他用户状态保存方 ...