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步步精深
在图片上双击过的位置绘制一个 圆圈 鼠标事件就是和鼠标有关的,比如左键按下,左键松开,右键按下,右键松开,双击右键等等. 我们可以通过鼠标事件获得与鼠标对应的图片上的坐标.我们通过以下函数来调用查看所 ...
随机推荐
- VC++/MFC 最常用宏和指令
1.#include指令 包含指定的文件,最基本的最熟悉的指令,编程中不得不用,包含库文件用双尖括号,包含自定义头文件用双引号. 2.#define指令 预定义,通常用它来定义常量(包括无参量与 ...
- C# Stream
转载:C# 温故而知新:Stream篇(一.二) http://www.cnblogs.com/JimmyZheng/archive/2012/03/17/2402814.html#no2 http: ...
- jquery样式篇
1.jquery: 1.1简介 jquery是一个轻量级的javascript库.版本号分1.x版本和2.x版本,2.x版本不再支持IE6 7 8,而更好的支 持移动端开发. 每一个版本分为开发版和压 ...
- STM32F412应用开发笔记之四:与远红外炭氢传感器通讯
远红外炭氢传感器是在多组分气体传感器中用来检测甲烷和丙烷浓度的,采用单总线串行通讯,TTL电平.所以我们需要用到UART口来实现与远红外炭氢传感器的通讯. 远红外传感器就是这个样子的: 再来一张进气和 ...
- 6. UIImageView 的使用
1. UIImageView 的认识 QQ:853740091 UIImageView 继承UIView,通过他的名字我们也可以看出这个是用来显示图片的 2. 使用方法 UIImageView *im ...
- css3 自定义字体 @font-face
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...
- 带蒙版的提交loading页面实现
废话不多说,直接上代码. 首先是HTML中层的实现: <!-- loading 层 --> <div id="loadingDivBack" style=&quo ...
- iOS 自动追加版本时间版本号脚本
buildNumber=$(/usr/libexec/PlistBuddy -c "Print :CFBundleVersion" "${PROJECT_DIR}/${I ...
- PHP面试总结
从8月15号来到北京一直到今天,一月有余.来的这段时间一直准备笔试面试,大大小小的公司,乱七八糟面了10多家,近期才安顿下来.面试的这段时间感觉自己成长了不少.初来到这个陌生的城市一脸茫然,不会乘地铁 ...
- 给钛度产品的一些建议(Note)
背景:上一只鼠标坏了,今天299从京东如了一只钛度鼠标,核心用料据说都很高端,设计也不错.但是实际用起来发现了很多码农常识问题和产品建议,遂反馈给钛度客服,并记录于此. 传送门: http://bbs ...