iPhone上页面触屏事件的简单实现

     首先先介绍一下几个关于触屏的事件，当你把一根手指头放在屏幕上时，触摸（touch）事件便被触发了。每当一根新的手指放在屏幕上，就会触发一个新的touchstart事件。而当 手指抬起离开屏幕，touchend事件便被触发了。如果在手指接触屏幕后，你又挪动了这根手指，那么触发的是touchmove事件。

有以下touch事件：

• touchstart:  手指放在屏幕上时触发
• touchend:    手指离开屏幕时触发
• touchmove: 手指在屏幕上移动时触发

例：

// 下一项 $(".next").bind("click", function () { // …… }); // 上一项 $(".prev").bind("click", function () { // …… }); // …… // 用于标记页面中X轴位置 var _x; // 标记是否能移动 var _nextNum; var _prevNum; // 事件触发的对象(很奇怪的是，用$("#id").bind()方法绑定居然起不了作用 囧~) var obj = $("#id")[0]; // 触屏事件 obj.ontouchstart = function (e) { if (e.touches.length == 1) { // 锁定屏幕，通过这个方法，在你用手指拖动时，可以 让页面保持绝对静止 event.preventDefault(); // 获取当前手指在页面位置 var touch = e.touches[0]; _x = touch.pageX; // 标记可移动 _nextNum = true; _prevNum = true; } } obj.ontouchmove = function (e) { if (e.touches.length == 1 && (_nextNum || _prevNum)) { // 锁定屏幕，通过这个方法，在你用手指拖动时，可以 让页面保持绝对静止 event.preventDefault(); // 获取当前手指在页面位置 var touch = e.touches[0]; var x = touch.pageX; // 上一项 if (x > _x && _prevNum) { $(".current").prev().triggerHandler("click"); _prevNum = false; _nextNum = true; } // 下一项 if (x < _x && _nextNum) { $(".current").next().triggerHandler("click"); _prevNum = true _nextNum = false; } } } obj.ontouchEnd = function () { // 标记不可移动 _prevNum = false _nextNum = false; }  

 

   其实在总体上来看，除了事件替换成专有的几个事件外，其它的在思路上跟我们实现的在页面拖动层大同小异。