css学习---pointer-events（用来阻止元素成为鼠标事件目标）

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 时，不会跳转。