CSS3 实用属性:pointer-events

最近有个需求就是在页面添加水印,但是又不能影响用户操作。
结果发现了一个叫pointer-events的css属性,是一个与javascript有关的属性

pointer-events属性值详解

pointer-events属性有很多值,但是对于浏览器来说,只有autonone两个值可用

  • auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
  • none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。

效果如下
CSS3 实用属性:pointer-events

可参考其他说明
https://segmentfault.com/a/1190000018075600
http://www.imooc.com/article/48022