CSS的pointer

2021-01-20 09:29 jianzhan

而本文要说的pointer-events的设计风格更像JavaScript，它可以：

1.阻拦客户的点一下姿势造成任何实际效果
.阻拦缺省电脑鼠标指针的显示信息
3.阻拦CSS里的hover和active情况的转变开启恶性事件
4.阻拦JavaScript点一下姿势开启的恶性事件

1个CSS特性能做全部的这么多事儿！

The CSS

这个pointer-events特性有许多可使用的特性值，但绝大多数全是对于SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 和 inherit。在其中none值能阻拦点一下、情况转变和电脑鼠标指针转变：

拷贝编码
编码以下:
.disabled { pointer-events: none; }

1些必须留意的有关pointer-events的事项：

1.子元素能够申明pointer-events来解禁父元素的阻拦电脑鼠标恶性事件限定。
2.假如你对1个元素设定了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="javascript:;" id="testLink" style="pointer-events:none;">检测</a></p>

<p><a href="javascript:;" class="pointerLogo" style="pointer-events:none;">检测</a></p>

<script type="text/javascript">
document.getElementById("testLink").addEventListener("click", function(e) {
alert("点一下了!");
});
</script>


我第1次留意到pointer-events特性是在Firefox Marketplace网站上，她们拿它来严禁按钮的点一下，这样的益处是款式上也获得了操纵。自然，不必应用pointer-events来屏蔽1些10分重要的开启姿势，由于这个款式能够根据访问器操纵台删掉掉！

为您推荐