CSS的pointer-events属性详细介绍（作用和注意事项）
网站建设 2023-01-28 21:39www.1681989.com免费网站
而本文要说的poter-events的风格更像JavaScript，它能够
1.阻止用户的点击动作产生任何效果
.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件
一个CSS属性能做所有的这么多事情！
The CSS
这个poter-events属性有很多可以使用的属性值，但大部分都是针对SVG的auto, none, visiblePated, visibleFill, visibleStroke, visible, pated, fill, stroke, all, 以及 herit。其中none值能阻止点击、状态变化和鼠标指针变化
复制代码
代码如下:.disabled { poter-events: none; }
一些需要注意的关于poter-events的事项
1.子元素可以声明poter-events来解禁父元素的阻止鼠标事件限制。
2.如果你对一个元素设置了click事件监听器，然后你移除了poter-events样式声明，或把它的值改变为auto，监听器会重新生效。基本上，监听器会遵守poter-events的设定。
测试代码
复制代码
代码如下:<p>狼蚁网站SEO优化的这个链接上的 <code>poter-events</code>属性值是<code>none</code>。点击它们，什么都不会发生。我还在“测试”链接上添加了监听器。如果<code>poter-events</code>的值是<code>none</code>，对话框就不会弹出来，你可以在console里修改它的值，这样点击后就会弹出对话框！</p>
<p><a href="javascript:;" id="testLk" style="poter-events:none;">测试</a></p>
<p><a href="javascript:;" class="poterLogo" style="poter-events:none;">测试</a></p>
<script type="text/javascript">
document.getElementById("testLk").addEventListener("click", function(e) {
alert("点击了!");
});
</script>
我第一次注意到poter-events属性是在Firefox Marketplace网站上，他们拿它来禁止按钮的点击，这样的好处是样式上也得到了控制。，不要使用poter-events来屏蔽一些十分关键的触发动作，因为这个样式可以通过浏览器控制台删除掉！
网站设计
- 静宁会SEO的网站建设公司：全面提升您的网络影
- 提升在线业务的关键：选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司：打造您的在线品牌
- 灵山SEO网站建设公司：提升您的在线业务表现
- 蒙城网站建设优化公司：提升您网站表现的理想
- 阳谷企业网站优化：提升线上业务力的关键
- 樟树专业的网站建设公司：打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司：助您轻松打造在线业务
- 巫溪百度网站优化：提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱？全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销