css屏蔽元素的鼠标事件pointer-events
// 屏蔽点击
$('body').css('pointer-events', 'none');
//恢复默认
$('body').css('pointer-events', 'auto');
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: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
不过在浏览器中 auto 和 none 就可以了
auto:效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。。
none:元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
css屏蔽元素的鼠标事件pointer-events的更多相关文章
- selenium的元素定位-鼠标事件
鼠标事件 ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 ActionChains 中存储的行为: context_click(): 右击: double_cl ...
- css3 -阻止元素成为鼠标事件目标 pointer-events
pointer-events:auto|none 其中pointer-events:none:元素永远不会成为鼠标事件的target. <!DOCTYPE html> <html l ...
- Selenium(十):用By定位元素、鼠标事件、键盘事件
1. 用By定位元素 除了前面介绍的单位方法,WebDriver还提供了另外一套写法,即统一调用find_element()方法,通过By来声明定位的方法,并且传入对应定位方法的定位参数.具体如下: ...
- 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件
刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...
- 转【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件
/*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask&q ...
- pointer-events属性屏蔽鼠标事件(点击穿透上层元素)
应用场景 我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的 ...
- (转)CSS3之pointer-events(屏蔽鼠标事件)属性说明
我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的. 但有时 ...
- css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件
引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...
- Opencv处理鼠标事件-OpenCV步步精深
在图片上双击过的位置绘制一个 圆圈 鼠标事件就是和鼠标有关的,比如左键按下,左键松开,右键按下,右键松开,双击右键等等. 我们可以通过鼠标事件获得与鼠标对应的图片上的坐标.我们通过以下函数来调用查看所 ...
随机推荐
- [原创]用windows7连接windows2003的终端服务器时,出现"由于这台计算机没有远程桌面客户端访问许可证,远程会话被中断"的问题
用windows7连接windows2003的终端服务器时,出现"由于这台计算机没有远程桌面客户端访问许可证,远程会话被中断"的问题,原因是终端服务器授权方式设置为了"每 ...
- Java笔记:Number
序号 方法与描述 1 xxxValue()将number对象转换为xxx数据类型的值并返回. 2 compareTo()将number对象与参数比较. 3 equals()判断number对象是否与参 ...
- java垃圾回收机制
1 .垃圾回收机制(GC)垃圾回收就是回收内存中不再使用对象:(1)垃圾回收的步骤:1)查找内存中不再使用的对象:2)释放这些对象所占用的内存:(2)查找内存中不再使用的对象方法:1)引用计数法如果一 ...
- 手把手教你玩转nginx负载均衡(一)----使用vitualBox创建虚拟机
引言 作为一个web程序员,有时候需要想尽办法来利用有限的资源来产生最大程度的负载,除了提高硬件配置,增加带宽之外,CDN加速,DNS加速,缓存,还可以利用反向代理.但是要说反向代理,就不的不说ngi ...
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- c#3.0新特性
1.自动属性 public int ID { get; set; } // 上面的ID属性(自动属性)等同于下面的ID属性 // private int _id; // public int ID / ...
- 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 ...
- [Spring] AOP, Aspect实例解析
最近要用到切面来统一处理日志记录,写了个小实例练了练手: 具体实现类: public interface PersonServer { public void save(String name); p ...
- MySQL开发规范
字段设计 (1)建议使用UNSIGNED存储非负数值. (2)建议使用INT UNSIGNED存储IPV4. (4)INT类型固定占用4字节存储,例如INT(4)仅代表显示字符宽度为4位,不代表存储长 ...
- 用Redis实现Session功能
0.什么是Redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API ---维基百科 1.与其他用户状态保存方 ...