原生事件
因为click有300ms的延迟(用于判断是否长按),所以不建议在移动端使用click。
移动端事件,主要有4个,代码例子:
<script type="text/javascript">
var box =document.querySelector(".box");
box.addEventListener("touchstart",function(e){
console.log(e);
console.log("start");
})
box.addEventListener("touchmove",function(e){
console.log("move");
})
box.addEventListener("touchend",function(e){
console.log("end");
})
box.addEventListener("touchcancel",function(e){
console.log("cancel");
})
</script>
touches 当前进行触摸操作的touch对象数组,同时按下的几个手指。
screenX screenY 屏幕坐标。
可以使用console.log(e);打印touch事件。
手机上可以使用vconsole.min.js进行调试。
touchcancel,是系统级事件导致的中断。
zepto
Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小。Zepto最大的优势是它的文件大小,只有8k多,是目前功能完备的库中最小的一个,尽管不大,Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Zepto都有,Zepto中还有一些jQuery中没有的。另外,因为Zepto的API大部分都能和jQuery兼容,所以用起来极其容易,如果熟悉jQuery,就能很容易掌握Zepto。你可用同样的方式重用jQuery中的很多方法,也可以方面地把方法串在一起得到更简洁的代码,甚至不用看它的文档。
touch-0.2.6.js
这个文件是百度一个团队之前做的,现在这个库已经没有人维护了。
0.2.6及之前的touch.js不支持事件代理机制,而新的touch.js通过手势识别,事件冒泡及原生的事件对象,提供事件代理机制和自定义事件的能力,从而极大提升性能。原有的stopPropagation会阻止原生事件冒泡,从而使手势识别失效,因此,需要手动删除/注释stopPropagation语句。麻烦各位根据自己项目的实际情况,选择性升级touch.js。
jquery.mobile
jQuery Mobile是jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。