参考
移动端touch事件和click事件的区别
在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意?
一、四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
每个触摸事件被触发后,会生成一个event对象
二、touch事件和click事件的区别
在移动端,手指点击一个元素,会经过: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”