jquery——移動端touch事件

標籤：col   art   original   座標   end   滑鼠   tar   擷取   prevent   

首先為了防止事件觸發預設行為，我們需要去禁止，安全的禁止方法：

// 判斷預設行為是否可以被禁用    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(‘向左滑動‘);    }});

 

 

對應pc端滑鼠操作：

touchstart  ——>   mousesdowntouchend  ——>   mouseuptouchmove  ——>   mousemove

jquery——移動端touch事件