移动端touch事件穿透解决有哪些办法?

2018-10-12 17:43:00 3505 4 编辑:深正互联 来源:互联网

1.延迟&&遮挡

由于 click 事件具有滞后性,在这段时间内原来点击的元素消失了,触发了元素底部某元素的点击事件,于是便“穿透”了。因此我们可以让元素的消失变长,给元素的消失做一个fade效果,类似 jQuery 里的 fadeOut,并设置动画duration 大于 300ms,这样当延迟的 click 触发时,就不会“穿透”到下方的元素了。

同理,不用上述办法,我们可以动态地在触摸位置生成一个透明的元素,这样当上层元素消失而延迟的 click 来到时,它点击到的是那个透明的元素,也不会“穿透”到底下。在一定的 timeout 后再将生成的透明元素移除。

2.pointer-events

pointer-events 是 CSS3 中的属性,它有很多取值,有用的主要是 auto 和 none,其他属性值为 SVG 服务。

auto – 效果和没有定义 pointer-events 属性相同,鼠标不会穿透当前层。 

none – 元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了 pointer-events 为其它值,比如 auto,鼠标还是会监听这个子元素的。

关于使用 pointer-events 后的事件冒泡,有人做了个实验,见代码

移动端touch

3.fastclick

使用 fastclick(https://github.com/ftlabs/fastclick)库,其实现思路是,取消 click 事件,用 touchend 模拟快速点击行为。

FastClick.attach(document.body); 

从此所有点击事件都使用 click,不会出现“穿透”的问题,并且没有300ms的延迟。

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询 微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询