css的pointer-events: none应用
in 前端 with 0 comment

css的pointer-events: none应用

in 前端 with 0 comment

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

可点击区域为绿色部分,红色为点击失效部分:

1.png

原因是在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;
}
Comments are closed.