移動端 js事件

2021-08-21 21:40:40 字數 921 閱讀 3418

移動端觸屏滑動的效果其實就是輪播,在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();

JS移動端滑屏事件

來看看在pc上面的幾個事件 onmousedown,onmousemove,onmouseup 我相信大家對這幾個事件一定不陌生,第乙個onmousedown表示滑鼠按下,第二個onmousemove表示滑鼠移動,第三個onmouseup表示滑鼠抬起,雖然在移動端也支援這幾個事件,但是效能並不理想,...

移動端JS 觸控事件基礎

一 手機上的觸控事件 基本事件 touchstart 手指剛接觸螢幕時觸發 touchmove 手指在螢幕上移動時觸發 touchend 手指從螢幕上移開時觸發 下面這個比較少用 touchcancel 觸控過程被系統取消時觸發 每個事件都有以下列表,比如touchend的targettouches...

移動端事件

移動端事件 onclick 移動端也可以使用onclick事件,但是查閱資料上說會有300ms的延遲,究竟是不是有待考究。ontouchstart 相當於pc端的onmousedown,詳細可參照先前寫的文件 事件 下同 ontouchend 相當於pc端的onmouseup.ontouchmove...