web 移动端事件总结

参考文章:
在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意
移动端兼容问题研究 javascript事件机制详解(涉及移动兼容)
读fastclick源码有感 彻底解决tap“点透”,提升移动端点击响应速度

实现一个移动端TODO应用,想添加一些触摸事件,之前无论PC还是移动端,都统一用click,现在细思恐极啊~~。一时半会想不出更好的实现方案,于是找了很多资料学习了一下,在此做个分享。

为什么移动端不用click

估计大家都知道,移动端的click有300ms延迟的问题,在移动端浏览器中,连续两次点击是缩放操作,所以在用户点击屏幕后,浏览器会检查在300ms内是否有另一次点击,如果没有则触发click事件。因为有延迟,所以不使用咯。

替换click的方案

  1. 使用touchstart
    touch事件包括touchstart、touchend、touchmove等,简单使用touchstart来替换click,但问题是,如果我想在同一对象上绑定一个单击事件和一个滑动事件怎么办,这时候就会出现冲突。
  2. 使用tap事件
    标准事件中没有tap事件,tap事件是一些库,如zepto,使用touch进行封装的,在touchstart、touchend时记录时间、手指位置,在touchend时进行比较,如果手指位置为同一位置且时间间隔较短,且过程中未曾触发touchmove事件,则调用回调函数。
    zepto用于判断的关键代码:
//延迟时间
 if (delta > 0 && delta <= 250) touch.isDoubleTap = true;
//允许的偏移量
if (deltaX < 30 && deltaY < 30) {……}

不过300ms后还是会产生click事件,只是在该对象上没有进行监听,由此产生了“点透”现象:
(1)页面弹出一个模态框,模态框上有个按钮(关闭模态框),按钮正下方(在主页面上)有一个输入框
(2)当点击模态框上的关闭按钮,模态框立即消失,但300ms后click事件触发,而输入框正好监听click事件,因此输入框会得到焦点
为什么不对click进行拦截呢?原因是zepto使用的是事件代理,元素上的touch事件冒泡到document上,在document的事件回调中执行绑定在元素上的事件回调,而在document上执行preventDefault是不起作用的。
解决“点透”问题:略。

  1. 使用fastclick
    使用方法参考:https://github.com/ftlabs/fastclick
    fastclick也是使用事件委托(FastClick.attach(document.body, options);),但是冒泡到body上后,通过tap原理来判断是否单击,是则重新构造一个点击事件dispatch到原来的元素上,触发元素上的绑定事件,由于在tap事件后触发click,所以解决了延迟问题,并且300ms后,不再产生click事件,所以解决了”点透“问题。
FastClick.prototype.sendClick = function(targetElement, event) {
    ……   
    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);
};

另外的好处是

FastClick doesn't attach any listeners on desktop browsers.
Chrome 32+ on Android withwidth=device-width in the viewport meta tag doesn't have a 300ms delay

到了这里,我们知道,最好的解决兼容PC和移动端的点击事件的办法是引入fastclick。然而我现在想要实现的是各种触摸事件——gg——既然要实现各种触摸事件,那就暂时不考虑PC的问题,所以考虑使用hammer.js

hammer.js

使用hammer.js实现qq消息中拖出删除画面的效果


web 移动端事件总结_第1张图片
qq消息界面截图

最开始的实现方法是通过panstart、panmove、panend来实现滑动条的滑动距离和手指的滑动成相等关系,实现方法可以看我的codepan:
See the Pen touch delete by jsAllen (@jsAllen) on CodePen

不过这样的动画实现过程比较恶心,有好多的判断,后来在vue项目中,直接改用过渡,通过panleft、panright来修改translateX,再给tranlateX添加过渡。虽然效果明显弱了点,但操作流畅了许多。

在vue中使用hammer.js

在github上找了一下,发现有个vue-touch,更惊喜的是,这是个官方插件,不过项目使用的是vue2.0版本,而vue-touch暂不兼容vue2.0。看了一下issue,发现有人也遇到这个问题,然后又发现vue-touch有一个分支,已经做了兼容,哈哈。看了下源码,其实就是将hammer.js封装成指令。
使用方法:

就此解决了项目中的一个小小触摸事件,不过感觉后面的坑会很多,自己接触移动端事件比较少,所以后面还要不断的总结经验,寻找更加高效优雅的处理方法。

你可能感兴趣的:(web 移动端事件总结)