对于移动端浏览器touch事件的研究总结（2）

Apr 4, 2014 -

先放一段对于昨天文章的补充：

event.touches 是与屏幕接触的所有手指的数组。而不仅仅是位于目标 DOM 元素上的那些。所以改用 event.targetTouches 或 event.changedTouches 要更实用一些。前者主体是DOM，后者主体是事件。我个人一般喜欢用changedTouches。

还有就是在写原生JS的touch事件和用Jquery写touch事件的一些小小的区别：

先来看两段代码：

第一段，不会alert的代码：

$("body").on('touchstart', function(event){ 
    alert(event.changedTouches.length);
});

第二段，可以正常alert出内容的代码：

$("body").on('touchstart', function(){ 
    alert(event.changedTouches.length);
});

可以看出第一段代码指向的是Jquery得event，第二段代码指向的是原生JS的event。其中的区别主要是Jquery对原生event对象做了修复和包装：

扩充了 originalEvent 属性，该属性暂存了原生事件对象
修复了 timeStamp ，该属性IE6/7/8不支持，其它支持的各个浏览器中返回值也不同
阻止DOM元素默认行为统一采用 preventDefault
停止事件冒泡统一采用 stopPropagation
实现或扩充了 DOM3事件的几个方法：stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped

所以想要让Juery的event对象正常工作，只要给它加上一层originalEvent属性就可以了：

$("body").on('touchstart', function(event){ 
    alert(event.originalEvent.changedTouches.length);
});

ps: 安卓必须死，从今天起把安卓归为IE6，IE7同样的存在！

aresli.com