初识属性pointer-events

在一个项目中,我为了一个特效,在一个链接前面加入一个半透明遮罩。为此,链接被遮罩挡住,导致无法成功点击到链接。

那么有什么办法可以实现事件穿透呢。

这里要说到CSS3,CSS3引入不少属性,也有不少属性是包含了JS的集合,比如常见的attr这个。

对于以上事件,这样介绍一个CSS3的属性pointer-events

常见的pointer-events的值有auto|none

none:

pointer-events,英文直译是指示器事件。none就是无的意思。合起来意思是,无指示器事件。顾名思义就是取消鼠标事件。

很诧异吧,css居然可以直接令JS的鼠标事件无效。

那无效以后呢,无效以后当前把点击事件穿透到当前dom下的dom了。


auto:


这个就不用说了,大家都懂的。


所以要穿透当前的dom成功点击下层的链接怎么办? CSS写入pointer-events:none



小朋友们,你们学会了吗


原文链接:,转发请注明来源!
「初识属性pointer-events」评论列表

发表评论