css的pointer-events: none应用

今天写组件的时候发现的问题，一开始以为是用了几年的鼠标左键彻底坏了。打开手机一看也点不动。乖乖，找了一会BUG发现是css的问题

可点击区域为绿色部分，红色为点击失效部分：

原因是在div.isVideo上创建了伪元素before来居中放置icon-play图标，代码如下：

<div class="isVideo">
    <!-- 点击在 :before 上时，无法触发img的onclick事件 -->
    <img src="https://www.xxx.xxx/xxx.png" onclick="播放视频" alt="">
</div>

一番搜索之后发现可以在:before上添加pointer-events: none来穿透点击事件

.isVideo:before {
    ...
    pointer-events: none;
}

其他推荐内容