pointer-events
- pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
- pointer-events 更像是JavaScript,它能够:
阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件
pointer-events属性值
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
- auto
与pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同 - none
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
示例
img {
pointer-events: none;
}
解决某些手机上长按图片 图片会放大的问题;如图是iOS-iphoneX长按img出现的预览图。
<ul>
<li>
<a href="https://developer.mozilla.org/">MDN</a>
</li>
<li>
<a href="http://example.com">example.com</a>
</li>
</ul>
a[href="http://example.com"] {
pointer-events: none;
}
上述代码效果为:点击链接 http://example.com 时,不会跳转。