css3样式pointer-events，点击穿透和海市蜃楼的效果

css样式pointer-events

pointer-events 是CSS3的一个属性，支持的值非常多，其中大部分都是和SVG有关。目前只了解 none 这个值， 其他值后续要补上。

pointer-events: none;

借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说：

pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

第一个意思，就是让鼠标事件失效（链接、点击等事件），失效原理就是点击某元素的时候，穿过该元素，点击到该元素下面的元素

第二个意思，可以让某个元素实现类似于海市蜃楼的效果，就是你可以看的到某个元素，但是你无法用行为操作它。

 

特性：

1，按钮加了 pointer-events: none;，然后再按就没效果了，同时鼠标在按钮上也不会变成“一只手”；

2，pointer-events 的值为 none 时，如果元素上绝对定位，那在它下一层的元素可以被选中；

3，pointer-events: none; 只是用来禁用鼠标的事件，通过其他方式绑定的事件还是会触发的，比如键盘事件等；

4，如果将一个元素的子元素 pointer-events 设置成其他值（比如：auto），那么当点击子元素时，还是会通过事件冒泡的形式出发父元素的事件；

5，关于a链接，用 tab 键还是可以选中a链接的，然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了；

6，如果我们给操作父元素设置了 pointer-events: none;，那所有的子元素都不能操作了，我们可以给需要操作的子元素重新设置为 pointer-events:auto。