pointer-events属性

       改项目的时候遇到了一个问题，给页面加了一个按钮，并且给这个按钮添加了 hover { cursor: pointer;} 属性，但是当鼠标移到这个按钮上的时候发现hover并没有起作用，于是又给这个按钮添加了一个点击事件输出console.log(‘点击到了’)，想看看这个按钮点击有没有效果，结果不出所料，点击事件也没有生效。

       于是乎我开始网页检查调样式，一直以为是父元素的层级把此按钮给覆盖住了（父元素的背景色是透明的，并且父元素中有z-index=999），就把父元素的z-index取消，给这个按钮设置z-index=9999，结果所想显示的样式还是不生效。然后我开始找博客，z-index为何不起作用？有三种情况：

1、父标签 position属性为relative；

2、问题标签无position属性（不包括static）；

3、问题标签含有浮动(float)属性。

对于上述情况的解决办法有三个：

1、position:relative改为position:absolute；

2、浮动元素添加position属性（如relative，absolute等）；

3、去除浮动。

我又仔细看了一下我项目的代码，我的代码并没有出现这三个问题中的任何一个，整个人的头都大了！这时我看到了一行关键的CSS代码！

pointer-events: none;

pointer-events是CSS3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式），它的属性有很多值，但是对于浏览器来说，只有auto和none两个值可用。剩下的值都是针对于SVG的。

• pointer-events:auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

• pointer-events:none——元素永远不会成为鼠标事件的target（目标）。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默认就可以穿透当前层，因为pointer-events默认为auto。

结合 非常有用的pointer-events属性 这篇文章中的例子，终于了解我代码中父元素用了pointer-events:none，所以父元素永远不是鼠标事件的目标，于是就把我写的按钮的hover样式和click事件给禁用了，这也就是为什么我添加z-index也不管用的原因。要想让在父元素中的按钮成为鼠标事件的目标，只需要给按钮样式中添加pointer-events:auto就可以了。

 

完美解决！简单的问题让我这个前端小白暴风哭泣o(╥﹏╥)o