今天小编跟大家讲解下有关CSS的pointer-events属性详细介绍（作用和注意事项） ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS的pointer-events属性详细介绍（作用和注意事项） 的相关资料，希望小伙伴们看了有所帮助。
而本文要说的pointer-events的风格更像Javascript 它能够：
1.阻止用户的点击动作产生任何效果.阻止缺省鼠标指针的显示3.阻止CSS里的hover和active状态的变化触发事件4.阻止Javascript点击动作触发的事件
一个CSS属性能做所有的这么多事情！
The CSS
这个pointer-events属性有很多可以使用的属性值 但大部分都是针对SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止点击、状态变化和鼠标指针变化：复制代码代码如下:.disabled { pointer-events: none; }
一些需要注意的关于pointer-events的事项：
1.子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。2.如果你对一个元素设置了click事件监听器 然后你移除了pointer-events样式声明 或把它的值改变为auto 监听器会重新生效。基本上 监听器会遵守pointer-events的设定。
测试代码：复制代码代码如下:<p>下面的这个链接上的 <code>pointer-events</code>属性值是<code>none</code>。点击它们 什么都不会发生。我还在“测试”链接上添加了监听器。如果<code>pointer-events</code>的值是<code>none</code> 对话框就不会弹出来 你可以在console里修改它的值 这样点击后就会弹出对话框！</p> <p><a href=""id="testlink"style="pointer-events:none;">测试</a></p> <p><a href=""class="pointerLogo"style="pointer-events:none;">测试</a></p> <script type="text/javascript"> document.getElementById("testlink").addEventListener("click", function(e) { alert("点击了!"); }); </script>
我第一次注意到pointer-events属性是在Firefox Marketplace网站上 他们拿它来禁止按钮的点击 这样的好处是样式上也得到了控制。当然 不要使用pointer-events来屏蔽一些十分关键的触发动作 因为这个样式可以通过浏览器控制台删除掉！
来源：爱蒂网
