移動端觸屏滑動，JS事件
阿新 • • 發佈：2019-01-07
移動端觸屏滑動的效果其實就是圖片輪播，在PC的頁面上很好實現，繫結click和mouseover等事件來完成。但是在移動裝置上，要實現這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。
以下是四種touch事件
- touchstart：手指放到螢幕上時觸發
- touchmove：手指在螢幕上滑動式觸發
- touchend：手指離開螢幕時觸發
- touchcancel：系統取消touch事件的時候觸發，這個好像比較少用
事件物件
每個觸控事件被觸發後，會生成一個event物件，event物件裡額外包括以下三個觸控列表
- touches：當前螢幕上所有手指的列表
- targetTouches：當前dom元素上手指的列表，儘量使用這個代替touches
- changedTouches：涉及當前事件的手指的列表，儘量使用這個代替touches
touch物件屬性
這些列表裡的每次觸控由touch物件組成，touch物件裡包含著觸控資訊，主要屬性如下：
- clientX / clientY：觸控點相對瀏覽器視窗的位置
- pageX / pageY：觸控點相對於頁面的位置
- screenX / screenY：觸控點相對於螢幕的位置
- identifier：touch物件的ID
- target：當前的DOM元素
注意：
手指在滑動整個螢幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在呼叫touch事件時，要注意禁止縮放和滾動。
-
禁止縮放，通過meta元標籤來設定。
1 <metaname="viewport"content="target-densitydpi=320,width=640,user-scalable=no"/> -
禁止滾動，preventDefault是阻止預設行為，touch事件的預設行為就是滾動。
1 event.preventDefault();
案例：
下面給出一個案例，需在移動裝置上才能看出效果。
1.定義touchstart的事件處理函式，並繫結事件：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
if
(!!self.touch) self.slider.addEventListener('touchstart',self.events,false);
//定義touchstart的事件處理函式
start:
function(event)
{
event.preventDefault();
//
阻止觸控事件的預設動作,即阻止滾屏
var
touch = event.touches[0]; //
touches陣列物件獲得螢幕上所有的touch，取第一個touch
//
取第一個touch的座標值
startPos
= {
x:
touch.pageX,
y:
touch.pageY,
time:
+new
Date
};
//
繫結事件
this.slider.addEventListener('touchmove',this,false
|