pointer-events属性主要用于以下几种场景:
None: 元素不会成为鼠标事件的目标。例如,如果想让一个元素透明对用户的点击,可以将其pointer-events设置为none。
Auto: 默认值。元素正常响应鼠标事件。
VisiblePainted: 元素仅在可见部分响应鼠标事件。
其他值: 还有一些其他值用于SVG元素,如visibleFill,visibleStroke,painted, 等。
把mask当做一张图片,为了方便展示,为其设置了透明度,mask下面是一个按钮,怎么触发按钮的点击事件?
正常情况下点击按钮是不会触发click事件的,因为mask的层级更高,完全遮住了按钮,鼠标只会点击到mask,但若此时为其加上pointer-events: none属性,点击事件会“穿透”该元素并可触发下面元素的事件,即按钮点击事件就可以被触发了!!!