一、手機上的觸控事件
基本事件:
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...