移动端前端JS事件相关

素颜马尾好姑娘i 2022-08-07 03:52 183阅读 0赞

接触移动端的前端童鞋，估计在js事件这里踩了很多坑，传统的click事件延迟和点透现象令人很烦扰，到底该不该摒弃click事件，全部换成touch事件呢？如果是，遇到点透现象又如何处理？

**首先了解下点透现象**：

![201404171956211.jpg][]

**场景描述：**

1.A/B两个层上下z轴重叠。

2.上层的A点击后消失或移开。（这一点很重要）

3.B元素本身有默认click事件（如a标签） 或 B绑定了click事件。

在以上情况下，点击A/B重叠的部分，就会出现点透的现象。

**点透现象的分析**

在移动端不使用click而用touch事件代替触摸是因为click事件有着300ms的延迟，事件触发的顺序：

touchstart——touchmove——touchend——click

touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能立即触发

click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指未曾在屏幕上移动，且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发

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

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

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

**有什么解决方案呢**

1、在处理一下弹层、遮罩层的显示于隐藏，可以优先考虑用click事件，因为click刚好的延迟，在这种交互下反而会有疑似更好的用户体验

2、如果对于B元素本身没有默认click事件的情况（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。

3、对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件（e.preventDefault()），从而阻止click事件的产生，但是这种方式对于链接的默认点击事件并不好处理

4、利用库类解决，比如新版的zeptotap事件、fastclick（[https://github.com/ftlabs/fastclick][https_github.com_ftlabs_fastclick] ）、hammer等通用库。

注：所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成

[201404171956211.jpg]: http://www.w3cmark.com/uploads/56651425393918.jpg
[https_github.com_ftlabs_fastclick]: https://github.com/ftlabs/fastclick

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关前端---js判断PC端或移动端

/ 判断PC或移动端 / function IsPC() { var userAgentInfo = navigator.userAgent

骑猪看日落/ 2022年11月28日 13:39/ 0 赞/ 140 阅读

相关将前端触摸事件完全映射到点击事件（移动端兼容）

在开发移动端项目经常会遇到电脑调试效果没问题，切换到移动端设备出现异常，比如在GIS或者轮播图（含有拖拽行为）等组件时，电脑开发可以正常执行拖拽事件，但到了移动设备会出现事件不

太过爱你忘了你带给我的痛/ 2022年09月11日 14:22/ 0 赞/ 202 阅读

相关 JS篇(030)-移动端 click 事件、touch 事件、tap 事件的区别

参考答案： 1. click 事件在移动端会有 200-300ms 的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的 200-300ms

一时失言乱红尘/ 2022年09月11日 07:17/ 0 赞/ 310 阅读

相关移动端前端JS事件相关

接触移动端的前端童鞋，估计在js事件这里踩了很多坑，传统的click事件延迟和点透现象令人很烦扰，到底该不该摒弃click事件，全部换成touch事件呢？如果是，遇到点透现象又

素颜马尾好姑娘i/ 2022年08月07日 03:52/ 0 赞/ 184 阅读

相关移动端keyup事件

最近在做一个项目需求，需要实现一个类似谷歌搜索的功能，可以模糊匹配到中文和字母。当时想到了keyup事件，每当键盘按下时监控input框值的变化，在电脑和安桌手机上测试都没有问

不念不忘少年蓝@/ 2022年07月15日 11:43/ 0 赞/ 305 阅读

相关移动端事件及事件应用

<table> <tbody> <tr> <td><b>目录</b></td> </tr> </tbody> </table> 1.移动端事件基

末蓝、/ 2022年06月04日 00:57/ 0 赞/ 288 阅读

相关移动端 - touch事件

touch 事件在模拟器下不支持用on的方式来给元素加touch事件，推荐用addEventListener方式 `touchstart` 手指触碰

矫情吗；*/ 2022年05月19日 07:21/ 0 赞/ 269 阅读

相关【移动端】学习移动端的滑动手势事件

1.判断滑动的手势条件触发touchmove事件移动的超过一定的距离，如10px，像滑动了1px，2px这类的距离太小，不能视为滑动 <!DOCT

红太狼/ 2022年01月06日 12:23/ 0 赞/ 385 阅读

相关移动端tap事件，也称移动端的click事件

pc端的的click事件在移动端也是可以出发的，只是在移动端会出现延迟的现象，早期移动设备浏览器网页时内容比较小，为增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确

骑猪看日落/ 2021年12月01日 12:26/ 0 赞/ 482 阅读

相关 JS 移动端的 Touch 事件使用

JS 移动端的 Touch 事件使用随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页，我们平时在pc浏览器上用的鼠标事件，比如：click, mouseo...

小灰灰/ 2020年06月02日 13:18/ 1 赞/ 859 阅读