详细说明CSS pointer-events属性的使用1

详细说明CSS pointer-events属性的使用

[摘要]这篇文章主要介绍了CSS pointer-events属性的使用，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。在前端的开发中，我们都是直接与用户接触，应该尽量让用户感到操作畅快愉...

这篇文章主要介绍了CSS pointer-events属性的使用，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在前端的开发中，我们都是直接与用户接触，应该尽量让用户感到操作畅快愉悦，获得类似native的感觉。其中动画是最常用的方法。

这里的需求是，弹层的设计，这个弹层希望可以像 native 上的弹层一样，点击按钮出现，点击遮罩或按钮时关闭，并且出现和关闭时有动画效果（fade，slide等）。

详细说明CSS pointer-events属性的使用

问题

在关闭弹层时，以fadeOut动画效果为例，我这里是利用opacity从1 -> 0的过程模拟逐渐消失的动画过程，container是弹层组件最外层容器：

.container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    animation: .5s fadeOut forwards;
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

问题是opacity为0只是container内的元素透明不可见的，container仍然存在于dom节点中。当我们给弹层的蒙层mask绑定关闭事件时，由于container的z-index非常大，点击事件都会触发在mask上。

transitionend和animationend事件

为了解决上述问题，同时让用户体验更好，我们可以通过监听transitionend和animationend事件等动画效果执行完再将container节点隐藏（display：none）。这样就不会出现mask拦截点击事件的问题了。

简介

采用CSS技术生成的动画效果，我们可以在JS中捕获动画或变换的结束事件：transitionend和animationend事件标准的浏览器事件。transitionend 事件会在 CSS transition 结束后触发。

animationend 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）。

代码示例：

/* * 在container元素上监听transitionend事件 * 然后指定一个函数, 例如 showMessage() */ function showMessage() { console.log('Transition 已完成'); } var element = document.getElementById("container"); element.addEventListener("transitionend", showMessage, false);

/* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-events: fill; /* SVG only */ pointer-events: stroke; /* SVG only */ pointer-events: all; /* SVG only */

比如说，pointer-events: visibleFill;

这个只适用于SVG，只有在元素的visibility属性为visible时，且鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill属性不影响事件处理。

其他只适用于SVG的属性介绍不再赘述，可以参考这里。

在这里我们更关注[auto none]两个属性值。这两个属性值用在其他html元素上也很有意思。

当值为auto时。与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同。

当值为none时，元素永远不会成为鼠标事件的target。换而言之，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

浏览器兼容性

详细说明CSS pointer-events属性的使用

可以看出，pointer-events兼容绝大多数移动端浏览器，且没有前缀要求。

注意的点

当pointer-events值为none时，不一定说明该元素的事件监听事件永远不会被触发。如果他的子元素有明确的设定pointer-events属性，且指定自己能成为鼠标事件的目标，那么触发的过程会通过事件冒泡传到父元素，父元素的事件监听事件就会被触发。

总结

在弹层组件可能会频繁调用的情况下，使用pointer-events方案，即点击遮罩或按钮时关闭时，设置container动画效果和pointer-events：none，弹层出现时，再设置pointer-events：auto。这样只需改变css的属性即可解决问题。

以上所述就是给大家介绍的CSS pointer-events属性使用的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程， CSS3视频教程！