微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

从移动端 click 到摇一摇

2017-09-07 22:07 前端大全

(点击上方公众号,可快速关注)

来源:人人网FED博客

fed.renren.com/2017/07/22/mobile-click-devicemotion/

如有好文章投稿,请点击 → 这里了解详情


以前听到前辈们说移动端尽量不要使用click,click会比较迟钝,能用touchstart还是用touchstart。但是用touchstart会有一个问题,用户在滑动页面的时候要是不小心碰到了相关元素也会触发touchstart,所以两者都有缺点。那怎么办呢?


首先为什么移动端的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有延迟。


更为重要的是,文档里面还提到在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都可以生效。


click是在什么时候触发的呢?来研究一下click/touch事件的触发先后顺序。


1. click/touch触发顺序


用以下的html代码来实验:


<!DOCType html>

<html>

<head>

    <meta charset="utf-8">

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

</head>

<body>

    <div id="target" style="margin-top:20px;width:200px;height:200px;background-color:#ccc">hello, world</div>

    <script>

!function(){

    var target = document.getElementById("target");

    var body = document.querySelector("body");

    var touchstartBeginTime = 0;

    function log(event){

        if(event.type === "touchstart") touchstartBeginTime = Date.now();

        console.log(event.type, Date.now() - touchstartBeginTime);

    }

    target.onclick = log;

    target.ontouchstart = log;

    target.ontouchend = log;

    target.ontouchmove = log;

    target.onmouseover = log;

    target.onmousedown = log;

    target.onmouseup = log;

}();

    </script>

</body>

</html>


用一台iPhone6 (IOS 10)的手机连接电脑的Safari做实验,如下图所示:



然后点击灰色的target区域,用电脑的Safari进行检查,可以看到输出结果:



可以看到click事件是在最后触发的,并且还看到300ms的延迟,实际的执行延迟要比这个大,因为浏览器的内核运行也需要消耗时间。现在加上viewport的meta标签,再观察结果,如下图所示:



可以看到,300ms的延迟没有了。


知道了click是在touchend之后触发的,现在我们来尝试一下实现一个tap事件。


2. tap事件的实现


虽然已经没有太大的必要自行实现一个tap事件,但是我们还是很好奇可以怎么实现一个能够快速触发的tap的事件?有两个库,一个是zepto,另一个是fastclick,它们都可以解决点击延迟的问题。其中,zepto有一个自定义事件tap,它是一个没有延迟的click事件。而fastclick是在touchend之后生成一个click事件,并立即触发这个click,再取消原本的click事件。这两者的原理都是一样的,都是在touchend之后触发,一个是触发它自己定义的tap事件,一个是触发原生click。


这里有一个关键的问题,就是touchend之后不能够每次都触发tap,因为有可能用户是在上下滑并不是在点击,不然的话直接监听touchstart就好了。所以怎么判定用户是点击还是在上下滑呢?Zepto是用的位移偏差,即记录下touchstart的时候的初始位移,然后用touchend的时候的位移减掉初始位移的偏差,如果这个差值在30以内,则认为用户是点击,大于30则认为是滑动。而fastclick是用的时间偏差,分别记录touchstart和touchend的时间戳,如果它们的时间差大于700毫秒,则认为是滑动操作,否则是点击操作。


Chrome又是怎么判断用户是点击还是滑动呢,笔者没有去看安卓或者IOS Chrome的源码,找了下Chromium的源码,它里面有一个resources的目录,是Chrome自己页面的代码,如chrome://setting页,它是用html写的。在这个里面有一个touch_handler.js,它里面封装了一些移动端的手势实现如tap,tap是根据时间位移判断是否要触发tap,如下所示:


 /**

   * The time, in milliseconds, that a touch must be held to be considered

   * 'long'.

   * @type {number}

   * <a href='http://www.jobbole.com/members/kaishu6296'>@private</a>

   */

  TouchHandler.TIME_FOR_LONG_PRESS_ = 500;


定义的时间为长时间按压long press的时间阈值为500ms,在touchstart里面启动一个计时器:


this.longPressTimeout_ = window.setTimeout(

      this.onLongPress_.bind(this), TouchHandler.TIME_FOR_LONG_PRESS_);

 

onLongPress_: function() {

  this.disableTap_ = true;

}


如果超过了阈值500ms,就把一个标志位disableTap_设置为true,然后在touchend里面,这个flag为true就不会触发tap:


if (!this.disableTap_)

    this.dispatchEvent_(TouchHandler.EventType.TAP, touch);


相对于fastclick用两个时间戳的方式,我感觉源码的实现更为复杂,因为要启动一个计时器。


现在我们来实现一个按位移偏差判断的tap。


要实现一个自定义事件,有两种方式,第一种是像jQuery/Zepto一样,自己封装一个事件机制,第二种是调用原生的document.createEvent,然后再执行div.dispatchEvent(event),这里我们使用第一种。


为此先写一个选择器。如下代码所示:


var $ = function(selector){

    var dom = null;

    if(typeof selector === "string"){

        dom = document.querySelectorAll(selector);

    } else if(selector instanceof HTMLElement){

        dom = selector;

    }  

    return new $Element(dom);

}

window.$ = $;


选择器的名称用$,它是一个函数,传进来的参数为选择器或者dom元素,如果是字符串的选择器,则调用querySelectorAll去获取dom元素,如果它已经是一个dom则不用处理,最后返回一个$Element的封装的实例,类似于jQuery对象。


现在来实现这个$Element的类,如下代码所示:


class $Element{

    constructor(_doms){

        var doms = _doms.constructor === Array || _doms.constructor === NodeList ?

                   _doms : [_doms];

        this.doms = doms;

        this.init();

        for(var i = 0; i < doms.length; i++){

            this[i] = doms[i];

            if(!doms[i].listeners){

                doms[i].listeners = {};

            }  

        }  

    }

}


$Element的构造函数里面,先判断参数的类型,如果它不是一个数组或者是用querySelectorAll返回的NodeList类型,则构造一个dom数组。然后给这些dom对象添加一个listeners的属性,用来存放事件的回调函数。注意这里不是一个好的实践,因为一般不推荐给原生对象添加东西。但是从简单考虑,这里先用这样的方法。


第8行代码比较有趣,把this当作一个数组,dom元素当作这个数组的元素。这样就可以通过索引获取dom元素:


var value = $("input")[0].value;


但是它又不是一个数组,它没有数组的sort/indexOf等函数,它是一个$Element实例,另一方面它又有length,可以通过index获取元素,所以它是一个伪数组,这样你就知道了arguments实例、jQuery对象这种伪数组是怎么来的。


上面代码还调了一个init,这个init函数用来添加tap事件:


init(){

    for(var i = 0; i < this.doms.length; i++){

        if(!this.doms[i].listeners){

            this.initTapEvent(this.doms[i]);

        }      

    }

}


在说tap事件之前,需要提供事件绑定和触发的api,如下所示:


on(eventType, callback){

    for(var i = 0; i < this.doms.length; i++){

        var dom = this.doms[i];

        if(!dom.listeners[eventType]){

            dom.listeners[eventType] = [];

        }      

        dom.listeners[eventType].push(callback);

    }

}


上面的on函数会给dom的listeners属性添加相应事件的回调,每种事件类型都用一个数组存储。而触发的代码如下所示:


trigger(eventType, event){

    for(var i = 0; i < this.doms.length; i++){

        $Element.dispatchEvent(this.doms[i], eventType, event);

    }

}

static dispatchEvent(dom, eventType, event){

    var listeners = dom.listeners[eventType];

    if(listeners){

        for(var i = 0; i < listeners.length; i++){

            listeners[i].call(dom, event);

        }      

    }

}


这段代码也好理解,根据不同的事件类型去取回调函数的数组,依次执行。


现在重点来说一下怎么添加一个tap事件,即上面的initTapEvent函数,如下代码所示:


initTapEvent(dom){

    var x1 = 0, x2 = 0, y1 = 0, y2 = 0;

    dom.addEventListener("touchstart", function(event){

 

    });

    dom.addEventListener("touchmove", function(event){

 

    });

    dom.addEventListener("touchend", function(event){

 

    });

}


思路是这样的,在touchstart的时候记录x1和y1的位置:


dom.addEventListener("touchstart", function(event){

    var touch = event.touches[0];

    x1 = x2 = touch.pageX;

    y1 = y2 = touch.pageY;

});


如果你用两根手指的话,那么event.touches.length就是2,如果是3根则为3,进而分别获得到每根手指的位置,由于我们是单点,所以就获取第一个手指的位置即可。pageX/pageY是相当于当前html页面的位置,而clientX和clientY是相对于视图窗口的位置。


然后在touchmove的时候获取到最新的移动位置:


dom.addEventListener("touchmove", function(event){

    var touch = event.touches[0];

    x2 = touch.pageX;

    y2 = touch.pageY;

});


最后touchend的时候,比较位移偏差:


dom.addEventListener("touchend", function(event){

    if(Math.abs(x2 - x1) < 10 && Math.abs(y2 - y1) < 10){

        $Element.dispatchEvent(dom, "tap", new $Event(x1, y1));

    }

    y2 = x2 = 0;

});


如果两者的位移差小于10,则认为是tap事件,并触发这个事件。这里封装了一个自定义事件:


class $Event{

    constructor(pageX, pageY){

        this.pageX = pageX;

        this.pageY = pageY;

    }  

}


然后就可以使用这个tap事件了,如下代码所示:


$("#target").on("tap", function(event){

    console.log("tap", event.pageX, event.pageY);

});


接着在手机浏览器上运行,当点击目标区域的时候就会执行tap回调,而上下滑动的时候则不会触发,如下图所示:



再比较一下tap和原生click的触发时间的差别,需要给自定义事件添加一个click:


dom.addEventListener("click", function(event){

    $Element.dispatchEvent(dom, "click", new $Event(event.pageX, event.pageY));

});


接着用一个tapTime记录下时间:


var tapTime = 0;

$("div").on("tap", function(event){

    console.log("tap", event.pageX, event.pageY);

    tapTime = Date.now();

});

 

$("div").on("click", function(event){

    console.log("time diff", Date.now() - tapTime);

});


点击后,观察控制台的输出:



click会大概慢20ms,可能是因为它前面还要触发mouse的事件。


这样我们就实现了一个自定义tap事件,是自己封装了一个事件机制,fastclick是使用原生的Event,如下fastclick的源码,在touchend的回调函数里面执行:


touch = event.changedTouches[0];

 

// Synthesise a click event, with an extra attribute so it can be tracked

clickEvent = document.createEvent('MouseEvents');

clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);

clickEvent.forwardedTouchEvent = true;

targetElement.dispatchEvent(clickEvent);


然后再调event.preventDefault禁掉原本的click事件的触发。它里面还做了其它一些的兼容性的处理。


这个时候如果要做一个放大的事件,你应该不难想到实现的方法。可以在touchstart里面获取event.touches两根手指的初始位置,保存初始化手指的距离,然后在touchmove里面再次获取新位置,计算新的距离减掉老的距离,如果是正数则说明是放大,反之缩小,放大和缩小的尺度也是可以取到一个相对值。手机Safari有一个gesturestart/gesturechange/gestureend事件,在gesturechange的event里面有一个放大比例scale的属性。读者可以自己尝试实现一个放大和缩小的手势事件。


当知道了怎么实现一个自定义事件之后,现在来实现一个更为复杂的“摇一摇”事件。


3. 摇一摇事件


html5新增了一个devicemotion的事件,可以使用手机的重力感应。如下代码所示:


window.ondevicemotion = function(event){

    var gravity = event.accelerationIncludingGravity;

    console.log(gravity.x, gravity.y, gravity.z);

}


x,y,z表示三个方向的重力加速度,如下图所示:



x是手机短边,y是长边,z是和手机屏幕垂直的方向,当把手机平着放的时候,由于x、y和地平线平行,所以g(x) = g(y) = 0,而z和地平线垂直,所以g(z) = 9.8左右,同理当把手机竖着放的时候,g(x) = g(z) = 0,而g(y) = -9.8.


devicemotion事件会不断地触发,而且触发得很快。


当我们把手机拿起来摇一摇的时候,这个场景应该是这样的:



y轴和x轴的变化范围从-45o到+45o,即这个区间是:


delta = 9.8 * sin(45o) * 2 = 13.8


即只要x轴和y轴的g值变化超过13.8,我们就认为发生了摇一摇事件。


根据上面的分析,不难写出以下的代码:


const EMPTY_VALUE = 100;

const THREAD_HOLD = 13.8;

var minX = EMPTY_VALUE,

    minY = EMPTY_VALUE;

window.ondevicemotion = function(event){

    var gravity = event.accelerationIncludingGravity,

        x = gravity.x,

        y = gravity.y;

    if(x < minX) minX = x;

    if(y < minY) minY = y;

    if(Math.abs(x - minX) > THREAD_HOLD &&  

            Math.abs(y - minY) > THREAD_HOLD){

        console.log("shake");

        var event = new CustomEvent("shake");

        window.dispatchEvent(event);

        minX = minY = EMPTY_VALUE;

    }  

}  

    

window.addEventListener("shake", function(){

    console.log("window shake callback was called");

});


用一个minX和minY记录最小的值,每次devicemotion触发的时候就判断当前的g值与最小值的差值是否超过了阈值,如果是的话就创建一个CustomEvent的实例,然后disatch给window,window上兼听的onshake事件就会触发了。


现在拿起手机摇一摇,控制台就会输出:



这样就实现了一个摇一摇shake事件。还有一个问题就是:这个shake会不会很容易触发,即使不是摇一摇操作它也触发了?根据实验上面代码如果不摇不容易触发shake,同时摇的时候比较容易触发。如果太难触发可以把阈值改小点。


当然判断是否摇一摇的算法不止上面一个,你还可以想出其它更好的方法。


综上,本文讨论了怎么去掉移动端click事件迟钝的300ms延迟,怎么实现一个快速响应的tap事件,怎么封装和触发自定义事件,以及摇一摇的原理是怎么样的,怎么实现一个摇一摇的shake事件。


相信阅读了本文,你就知道了怎么用一些基本事件进行组合触发一些高级事件。通常把这些基本事件封装起来,如上面用一个$Element的类,由它负责决定是否触发tap,而高层的调用者不需要关心tap事件触发的细节,这个$Element就相当于一个事件代理,或者也可以把tap当作一个门面。所以它是一个代理模式或者门面模式。更多设计模式可以查看本文《JS与面向对象》



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 怎么学 JavaScript? 从前端小白到技术专家,这里有3点可执行的建议 跟随 Google 工程师夯实前端基础,是种怎样的体验? 趣图:程序员的日常之一 前端跨域知识总结:15篇前端热文回看
猜您喜欢 基于Apriori算法的Nginx+Lua+ELK异常流量拦截方案 我们这一代人的困惑 紧急通知!以下人员请速与我们联系!因为8.27就要… Linux Kernel 4.12 发布,最新的稳定版内核 [硅谷下篇]专访葛俊:16亿用户背后的高效率​,定义Facebook工具文化