移動端JS 觸控事件基礎

2022-03-25 06:28:22 字數 1417 閱讀 2173

一、手機上的觸控事件

基本事件:

touchstart   //手指剛接觸螢幕時觸發

touchmove    //手指在螢幕上移動時觸發

touchend     //手指從螢幕上移開時觸發

下面這個比較少用:

touchcancel  //觸控過程被系統取消時觸發

每個事件都有以下列表,比如touchend的targettouches當然是 0 咯:

touches         //位於螢幕上的所有手指的列表

targettouches   //位於該元素上的所有手指的列表

changedtouches  //涉及當前事件的所有手指的列表

每個事件有列表,每個列表還有以下屬性:

複製**

其中座標常用pagex,pagey:

pagex    //相對於頁面的 x 座標

pagey    //相對於頁面的 y 座標

clientx  //相對於視區的 x 座標

clienty  //相對於視區的 y 座標

screenx  //相對於螢幕的 x 座標

screeny  //相對於螢幕的 y 座標

identifier // 當前觸控點的惟一編號

target   //手指所觸控的 dom 元素

複製**

event.preventdefault()   //阻止觸控時瀏覽器的縮放、滾動條滾動

var supporttouch = "createtouch" in document  //判斷是否支援觸控事件

更多深入內容?點選:

二、示例

複製**

var touchfunc = function(obj,type,func) ;

var stime = 0, etime = 0;

type = type.tolowercase();

obj.addeventlistener("touchstart",function(), false);

obj.addeventlistener("touchmove",function() , false);

obj.addeventlistener("touchend",function() else

}else if(math.abs(changey)>math.abs(changex)&&math.abs(changex)>init.x)else

}else if(math.abs(changex)etime = new date().gettime();

//點選事件,此處根據時間差細分下

if((etime - stime) > 300)

else

}if(type.indexof("end")!=-1) func();

}, false);

};

移動端的觸控事件

首先 touch 包含三類事件,它們分別是 touchstart touchmove touchend touch 屬性 1.touch.identifier 此 touch 物件的唯一識別符號。一次觸控動作 我們指的是手指的觸控 在平面上移動的整個過程中,該識別符號不變。可以根據它來判斷跟蹤的是否...

移動端的常用觸控事件

1 touches 表示當前跟蹤的觸控操作的 touch 物件的陣列。2 targettouches 特定於事件目標的 touch 物件的陣列。3 changetouches 表示自上次觸控以來發生了什麼改變的 touch 物件的陣列。每個 touch 物件包含的屬性 4 clientx 觸控目標在...

移動端 js事件

移動端觸屏滑動的效果其實就是輪播,在pc的頁面上很好實現,繫結click和mouseover等事件來完成。但是在移動裝置上,要實現這種輪播的效果,就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。以下是四種touch事件 touchstart 手指放到螢幕上時觸發 tou...