码迷,mamicode.com
首页 > 其他好文 > 详细

mobile touch event

时间:2014-09-02 15:25:14      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   ar   for   art   div   

touch.js

众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的click事件。mobile上,自己又喜欢用zepto.js库(喜欢有时候就是一种先入为主的感觉),但是zepto-touch又不争气,有这那的问题(比如穿透什么的)。只好抛弃它,fastclick很好用,只是只有对click事件的加速,所以把tap.js的代码拿来自己改了改,增加了swipeleft和swiperight事件产生了touch.js。这样,我平时用的最多的tap,swipeleft,swiperight事件都齐活了。地址:https://github.com/lilyImage/touch/


原理

与所有的这类封装的touch事件一样,利用touchstart, touchmove, touchend,touchcancel,的组合,在touchstart的时候记录手指的x,y位置;在touchmove的时候同样记录手指的位置,然后利用差值来判断是tap吗?还是swipe?zepto-touch模块设置的是30的差值,也就是手指移动的位置与开始时候的手指位置的差值。在touch.js中设置的这个阈值是10。

(1)如果移动的距离绝对值没有超过10,认为是tap

(2)如果移动的距离在x方向上小于10,认为是swipeleft

(3)如果移动的距离在y方向上大于10,认为是swiperight

注: 没有判断y轴方向,可以加上y的判断,增加swipeup和swipedown事件

代码

大概100行的代码,简单易懂,具体源代码见github,重点说下核心部分,即自定义事件部分。

/**polyfill https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent*/
(function () {
    function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( ‘CustomEvent‘ );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
    };

    CustomEvent.prototype = window.Event.prototype;

    window.CustomEvent = CustomEvent;
})();

//touchName: 自定义的事件名
//bubbles :  是否支持冒泡
//cancelable : 是否支持事件被取消
var evt = new window.CustomEvent(touchName, {
       bubbles: true,
       cancelable: true
 });

polyfill的存在是因为CustomEvent的dom4的规范,不一定所有的浏览器都支持,对于自定义事件的老式写法

// Create the event.创建事件
var event = document.createEvent(‘Event‘);

// Define that the event name is ‘build‘. 定义事件名为build
event.initEvent(‘build‘, true, true);

// Listen for the event.监听事件
document.addEventListener(‘build‘, function (e) {
  // e.target matches document from above
}, false);

// target can be any Element or other EventTarget. 分发事件,对象可以是元素,也可以是其他的事件
document.dispatchEvent(event);

所以touch.js的事件处理过程如下:

(1)new 一个touch对象,把需要绑定自定义事件的el传进去

(2)el元素现在绑定了touchstart,touchmove, touchend等事件

(3)在touchstart的时候,记录手指的位置

(4)在touchmove的时候,计算手指的位置,并给出是tap还是swipe的标识

(5)在touchend的时候,创建相应的tap,swipeleft,swiperight自定义事件,并执行

兼容性

还没有具体的测试过在mobile上的兼容性,这还要看各平台浏览器对CustomEvent的实现,以及createEvent的支持情况,后续补充

mobile touch event

标签:style   blog   http   color   io   ar   for   art   div   

原文地址:http://www.cnblogs.com/lilyimage/p/3951016.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!