jquery——移动端touch事件

⾸先为了防⽌事件触发默认⾏为，我们需要去禁⽌，安全的禁⽌⽅法：

// 判断默认⾏为是否可以被禁⽤ if (e.cancelable) {

// 判断默认⾏为是否已经被禁⽤ if (!e.defaultPrevented) { e.preventDefault(); }}

三个事件：

$(\"body\").on(\"touchstart\function(e) { e.preventDefault();});

$(\"body\").on(\"touchend\function(e) { e.preventDefault();});

$(\"body\").on(\"touchmove\function(e) { e.preventDefault();});

移动开始和结束的坐标获取：

startX = e.originalEvent.changedTouches[0].pageX;startY = e.originalEvent.changedTouches[0].pageY;moveEndX = e.originalEvent.changedTouches[0].pageX;moveEndY = e.originalEvent.changedTouches[0].pageY;

样例：

$(\"body\").on(\"touchstart\function(e) { e.preventDefault();

startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;});

$(\"body\").on(\"touchmove\function(e) { e.preventDefault();

moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY; if ( X > 0 ) { alert('向左滑动'); }});

注：以上$使⽤基于jquery1.7.2

对应pc端⿏标操作：

touchstart ——> mousedowntouchend ——> mouseuptouchmove ——> mousemove