你知道的移动端事件可能过时了。。。

2019-09-25 本文已影响0人捡了幸福的猪

一直以为移动端点击事件会有300ms的延迟，原来只是我觉得，不应该要我觉得[捂脸]

1） 为啥移动端会有click延迟的说法？
谷歌开发者文档 300ms tap delay, gone away

For many years, mobile browsers applied a 300-350ms delay between touchend and click while they waited to see if this was going to be a double-tap or not, since double-tap was a gesture to zoom into text.

即移动端要判断是否是双击，所以单击之后不能够立刻触发click，要等300ms，直到确认不是双击了才触发click。所以就导致了click有延迟。

这是移动端浏览器的默认行为，包括双击缩放、双击滚动。这些行为，尤其是双击缩放，主要是为桌面网站在移动端的浏览体验设计的。而在用户对页面进行操作的时候，移动端浏览器会优先判断用户是否要触发默认的行为。

2）现在还有吗？

答：可以没有了。

在2014年的Chrome 32版本已经把这个延迟去掉了，如果有一个meta标签：

  <meta name="viewport" content="width=device-width">

即把viewport设置成设备的实际像素，那么就不会有这300ms的延迟，并且这个举动受到了IE/Firefox/Safari(IOS 9.3)的支持，也就是说现在的移动端开发可以不用顾虑click会比较迟钝的问题。

如果设置initial-scale=1.0，在chrome上是可以生效，但是Safari不会：

  <meta name**=**"viewport" content**=**"initial-scale=1.0">

还有第三种办法就是设置CSS：

 html{

      touch-action: **manipulation**;

 }

这样也可以取消掉300ms的延迟，Chrome和Safari都可以生效。

3） 证明一下？

答：哦。

!function(){
    const html = document.documentElement;
    let touchstartBeginTime = 0;
    const log = (event) =>{
        if(event.type === "touchstart") touchstartBeginTime = Date.now();
        console.log(event.type, Date.now() - touchstartBeginTime);
    }

    html.onclick = log;
    html.ontouchstart = log;
    html.ontouchend = log;
    html.ontouchmove = log;
    html.onmouseover = log;
    html.onmousedown = log;
    html.onmouseup = log;
}();

meta包含 width=device-width or initial-scale=1.0

单击事件触发顺序：