最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。
1.阻止用户的点击动作产生任何效果,且有穿透效果
2.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件
一条CSS可以做许多事情是不是很神奇，我们在看一下兼容性情况如何。
IE 11+
Firefox 3.6＋
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+
为什么说这个属性非常的实用呢，在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花，避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events=none属性，让这些上方的canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的canvas来点击页面。
$("i").css("pointer-events","none");
给使用绝对定位的元素css添加属性：pointer-events:auto或者pointer-events:non...
# pointer-events 是什么 pointer-events：CSS 属性指定在什么情况下 (如果有) ...
pointer-events:none $('.111').html('消息').css({'color':'#9...
你不知道的CSS：css禁用鼠标点击事件 .disabled { pointer-events: none; }
css样式： .notClick { pointer-events:none; } 按钮点击事件： $("#ti...
给盖住其他元素的那个元素加个CSS属性 pointer-events: none;
CSS inherit值 设置div底部向上/右侧向左弹出 pointer-events pointer-even...
最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-...
绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。 现...
本文标题：CSS pointer-events
本文链接：https://www.haomeiwen.com/subject/nwbugxtx.html
网友评论