JS案例之5 移動端觸屏滑動

2022-08-23 22:57:11 字數 2725 閱讀 1910

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

以下是四種touch事件

touchstart:     //手指放到螢幕上時觸發

touchmove:      //手指在螢幕上滑動式觸發

touchend:    //手指離開螢幕時觸發

touchcancel:     //系統取消touch事件的時候觸發,這個好像比較少用

每個觸控事件被觸發後,會生成乙個event物件,event物件裡額外包括以下三個觸控列表

touches:     //當前螢幕上所有手指的列表

targettouches:      //當前dom元素上手指的列表,盡量使用這個代替touches

changedtouches:     //涉及當前事件的手指的列表,盡量使用這個代替touches

這些列表裡的每次觸控由touch物件組成,touch物件裡包含著觸控資訊,主要屬性如下:

clientx / clienty:      //觸控點相對瀏覽器視窗的位置

pagex / pagey:       //觸控點相對於頁面的位置

screenx  /  screeny:    //觸控點相對於螢幕的位置

identifier:        //touch物件的id

target:       //當前的dom元素

注意:

手指在滑動整個螢幕時,會影響瀏覽器的行為,比如滾動和縮放。所以在呼叫touch事件時,要注意禁止縮放和滾動。

1.禁止縮放

通過meta元標籤來設定。

2.禁止滾動

preventdefault是阻止預設行為,touch事件的預設行為就是滾動。

event.preventdefault();

案例:

下面給出乙個案例,需在移動裝置上才能看出效果。

1.定義touchstart的事件處理函式,並繫結事件:

if(!!self.touch) self.slider.addeventlistener('touchstart',self.events,false); 

//定義touchstart的事件處理函式

start:function(event); //取第乙個touch的座標值

isscrolling = 0; //這個引數判斷是垂直滾動還是水平滾動

this.slider.addeventlistener('touchmove',this,false);

this.slider.addeventlistener('touchend',this,false);

},觸發touchstart事件後,會產生乙個event物件,event物件裡包括觸控列表,獲得螢幕上的第乙個touch,並記下其pagex,pagey的座標。定義乙個變數標記滾動的方向。此時繫結touchmove,touchend事件。

2.定義手指在螢幕上移動的事件,定義touchmove函式。

//移動

move:function(event);

isscrolling = math.abs(endpos.x) < math.abs(endpos.y) ? 1:0; //isscrolling為1時,表示縱向滑動,0為橫向滑動

if(isscrolling === 0)

},同樣首先阻止頁面的滾屏行為,touchmove觸發後,會生成乙個event物件,在event物件中獲取touches觸屏列表,取得第乙個touch,並記下pagex,pagey的座標,算出差值,得出手指滑動的偏移量,使當前dom元素滑動。

3.定義手指從螢幕上拿起的事件,定義touchend函式。

//滑動釋放

end:function(event)else if(endpos.x < -10)

}this.icon[this.index].classname = 'curr';

this.slider.classname = 'cnt f-anim';

this.slider.style.left = -this.index*600 + 'px';

}//解綁事件

this.slider.removeeventlistener('touchmove',this,false);

this.slider.removeeventlistener('touchend',this,false);

},手指離開螢幕後,所執行的函式。這裡先判斷手指停留螢幕上的時間,如果時間太短,則不執行該函式。再判斷手指是左滑動還是右滑動,分別執行不同的操作。最後很重要的一點是移除touchmove,touchend繫結事件。

源**:

1 

2 325

26 27 28

50 51 1

52 2

53 3

54 4

55 5

56

57 58

59135

136

移動端觸屏滑動

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

移動端觸屏滑動拖拽

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

JS移動客戶端 觸屏滑動事件

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