js實現touch移動觸屏滑動事件_javascript技巧

以下是四種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();

使用案例：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js實現touch移動觸屏滑動事件_javascript技巧

js實現touch移動觸屏滑動事件_javascript技巧:移動端觸屏滑動的效果其實就是圖片輪播，在PC的頁面上很好實現，綁定click和mouseover等事件來完成。但是在移動設備上，要實現這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到屏幕滑動的每根手指。 以下是四種touch事件 touch

推薦度：

點擊下載本文 文檔為doc格式