移动端touch事件和click事件的区别

Posted 2023-03-16

参考技术A 参考
移动端touch事件和click事件的区别
在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意？

touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象

在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。

在手持设备的浏览器上（本处主要指代ios和android系统上的webkit内核的浏览器和嵌入在应用程序里面的webview），由于两次连续“轻触”是“放大”的操作（即使你两次轻触的是一个链接或一个有click事件监听器的元素），所以在第一次被“轻触”后，浏览器需要先等一段时间，看看有没有所谓的“连续的第二次轻触”。如果有，则进行“放大”操作。没有，才敢放心地认为用户不是要放大，而是需要“click”至此才敢触发click事件，导致“短按（手指接触屏幕到离开屏幕的时间比较短）”的click事件通常约会延迟300ms左右。

采用touchstart代替click是比较初级的解决方案，首先，touchstart和click的触发条件就有区别，对于手持设备的浏览器：1.touchstart：在这个dom（或冒泡到这个dom，这当然是废话）上手指触摸开始即能触发2.click：在这个dom（或冒泡到这个dom，这当然是废话）上手指触摸开始，且手指未曾在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发于是我们可以看到，完全用touchstart代替是不太可取的。根据上面的区别，又要规避click在移动手持设备上带来的延迟，很容易有了模拟的办法，大致思路是：在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值）且时间间隔较短（一般认为是200ms），且过程中未曾触发过touchmove，即可认为触发了手持设备上的“click”，一般称它为“tap”