当前位置: 首页>前端>正文

ios click穿透 js点击穿透

一.click与300ms延迟

  hammer.js绑定tap事件过后会在触发之后再次触发一个点击事件

在我们给遮罩绑定tap事件的时候如果遮罩下面恰好是一个a标签那么就会出现点击遮罩页面跳转的情况

二.点击穿透问题

点击穿透现象有三种

    *点击穿透问题:点击蒙层(mask)上的关闭按钮,蒙层消失后发现触发了按钮下面元素的click事件
蒙层关闭按钮绑定的是touch事件,而按钮下边元素绑定的是click事件,touch事件触发之后,蒙层消失了,300ms后这个点的click事件fire,event的target自然就是按钮下面的元素,因为按钮跟蒙层一起消息了。

    *跨页面点击穿透事件:如果按钮下面恰好是一个href属性的a标签,那么页面就会法神跳转,因为a标签跳转默认是click事件触发,所以原理和上面的完全相同

    *另一种跨页面点击穿透问题:这次没有mask了,直接点击页内按钮跳转至新页,然后发现新页面中对应位置元素的click事件被触发

和蒙层的道理一样,js控制页面跳转的逻辑如果是绑定在touch事件上的,而且新页面中对应位置的元素绑定的是click事件,而且页面在300ms内完成了跳转,三个条件同时满足,就出现这种情况了

非要细分的话还有第四种,不过概率很低,就是新页面中对应位置元素恰好是a标签,然后就发生连续跳转了。。。诸如此类的,都是点击穿透问题

三.为什么会出现点透

click延迟、延迟、还是延迟

在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟,具体touchstart与click的区别如下:

    *touchstart:在这个DOM(或者冒泡到这个DOM)上手指触摸开始即能立即出发

    *click:在这个DOM(或者冒泡这个DOM)上手指触摸开始,且手指未在屏幕上移动(某些<a href=”http://www.it165.net/edu/ewl/” target=”_blank” class=”keylink”>浏览器</a>允许移动一个非常小的位移值),且在这个DOM元素上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发

也就是说,事件的触发事件按照由早到晚排列为:touchstart早于touchend早于click。亦即click的触发是有延迟的,这个时间大概在300ms左右(即使给元素绑定的是touch事件,touchstart=>touchend=>click,click事件依然会被触发)

由于我们在touchstart阶段就已经隐藏了罩层A,当click被触发的时候,能够被点击的元素则是罩层下面的B元素绑定的事件,根据click事件的触发规则:

只有在被触发的时候,当前有click事件的元素显示,且在面朝用户的最前端时,才出发click事件。

由于B绑定了click事件(或者B本身默认存在click事件),所以B的click事件被触发,产生了点透的情况。

四.解决方案

最开始我是在hammer绑定的tap事件里面调用阻止浏览器默认行为和事件的相关方法 然后再次测试发现没有效果

ios click穿透 js点击穿透,ios click穿透 js点击穿透_click,第1张

然后我就思考了一下试了一下给我绑定hammerJs的节点再绑定一个touchend事件经过测试发现完美解决了那个问题

ios click穿透 js点击穿透,ios click穿透 js点击穿透_click_02,第2张

值得注意的是一定要给addEventListener事件的第三个参数添加为false 并且 touchend事件一定要在hammerJs绑定的tap事件之后添加否则无法解决tap点击穿透的问题hammer的其他事件没有进行测试不知道会不会有相同的问题

 

 

 


https://www.xamrdz.com/web/2rn1942491.html

相关文章: