移动端touch mouse click事件的触发顺序

在移动端页面上,一次点击行为,会触发touch、mouse、click事件,规则如下:

Stage 1: 手指按在屏幕上,立即触发touchstart。

Stage 2: 手指离开屏幕,这里分2种情况:

  如果手指在屏幕上的停留时间少于500ms,会依次触发 touchend->mousemove->mousedown->mouseup->click。事件间的时间间隔非常短。

  如果手指在屏幕上的停留时间大于500ms,只会触发touchend。

如果手指在屏幕上产生了移动,则不论停留时间多长,都只会触发 touchmove->touchend。

如果是在微信浏览器,一旦手指停留超过500ms,会立即触发一次mousemove,然后在手指离开的时候触发touchend。

另外,超过500ms的长按会触发浏览器的选中复制的弹框,css的 touch-callout:none; 可以禁止弹框,不过兼容性不佳。

你可能感兴趣的:(移动端touch mouse click事件的触发顺序)