以下是四種touch事件
touchstart: //手指放到屏幕上時觸發(fā)
touchmove: //手指在屏幕上滑動式觸發(fā)
touchend: //手指離開屏幕時觸發(fā)
touchcancel: //系統(tǒng)取消touch事件的時候觸發(fā)，這個好像比較少用

每個觸摸事件被觸發(fā)后，會生成一個event對象，event對象里額外包括以下三個觸摸列表

touches: //當(dāng)前屏幕上所有手指的列表
targetTouches: //當(dāng)前dom元素上手指的列表，盡量使用這個代替touches
changedTouches: //涉及當(dāng)前事件的手指的列表，盡量使用這個代替touches
這些列表里的每次觸摸由touch對象組成，touch對象里包含著觸摸信息，主要屬性如下：
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對于頁面的位置
screenX / screenY: //觸摸點相對于屏幕的位置
identifier: //touch對象的ID
target: //當(dāng)前的DOM元素

注意：

手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調(diào)用touch事件時，要注意禁止縮放和滾動。

1.禁止縮放
通過meta元標(biāo)簽來設(shè)置。

2.禁止?jié)L動
preventDefault是阻止默認(rèn)行為，touch事件的默認(rèn)行為就是滾動。
event.preventDefault();

使用案例：

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

js實現(xiàn)touch移動觸屏滑動事件_javascript技巧

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

推薦度：

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