PC端網頁從無到有發展至今，人們習慣了鼠標與鍵盤的人機交互模式，因此在PC端網頁開發中一般使用鼠標事件和鍵盤事件。

mouse事件：

onclick事件：在單擊鼠標左鍵或右鍵時發生。

ondoubleclick事件：在雙擊鼠標左鍵時發生。

onmousedown事件在單擊鼠標按鈕（左鍵、右鍵或中鍵）并且尚未松開時發生。

onmousemove事件：在鼠標光標移動時發生。

onmouseup事件：在松開鼠標按鈕（左鍵、右鍵或中鍵）時發生。

onmouseover事件：在鼠標光標移動到對象上時發生。

onmouseout事件：在鼠標光標離開對象時發生。

ommousewheel事件：在移動鼠標滾輪時發生。

keyboard事件：

onkeypress事件：按下并釋放某個鍵進時發生。

onkeydown事件：按鍵后（釋放該鍵之前）發生。

onkeyup事件：釋放某鍵時發生。

隨著科技的發展，觸屏設備越來越多，觸屏設備的人機交互模式（包含多點觸控技術）有點擊、雙擊、拖拽、輕劃、縮小、放大、按壓、雙指點擊、按住拖拽、旋轉等詳見移動交互小白的學習筆記——手勢篇。?現在，觸摸、傳統鼠標、鍵盤三種交互模式并存。Web開發人員需要確保網站適應這三種交互模式。

今天這里只介紹幾種普及得比較好的觸摸事件，你可以在絕大多數現代瀏覽器中來測試這一事件（必須是觸屏設備哦）：

touchstart：在用戶的手指觸摸屏幕的瞬間觸發。

touchmove：在用戶移動手指的過程中連續觸發。

touchend：用戶的手指離開屏幕的瞬間觸發。

touchcancel：其含義取決于瀏覽器。

touchcancel

我承認我不太明白touchcancel事件。touchcancel在觸摸序列被取消時觸發。但是這意味著什么完全取決于瀏覽器的實現：Chrome瀏覽器在用戶的手指離開屏幕的瞬間觸發touchcancel事件，但其他大多數瀏覽器則沒有。幸運的是，我還沒有發現必須使用touchcancel的情景。貌似其他腳本和庫也幾乎沒有使用 touchcancel。有些代碼為了安全起見，把它等同于touchend。

而每個觸摸事件都包括了三個觸摸列表，每個列表里包含了對應的一系列觸摸點（用來實現多點觸控）：

touches：當前位于屏幕上的所有手指的列表。

targetTouches：位于當前DOM元素上手指的列表。

changedTouches：涉及當前事件手指的列表。

每個觸摸點由包含了如下觸摸信息（常用）：

identifier：一個數值，唯一標識觸摸會話（touch session）中的當前手指。一般為從0開始的流水號（android4.1，uc）

target：DOM元素，是動作所針對的目標。

pageX/pageX/clientX/clientY/screenX/screenY：一個數值，動作在屏幕上發生的位置（page包含滾動距離,client不包含滾動距離，screen則以屏幕為基準）?！?/p>

radiusX/radiusY/rotationAngle：畫出大約相當于手指形狀的橢圓形，分別為橢圓形的兩個半徑和旋轉角度。

?

等價事件

目前這兩種交互模式都有自己的一套事件，但這并不意味著它們是完全無關且不同的。事實上，某些事件是等價的。下面的表格給出了這方面的情況。

很顯然，觸摸動作序列：touchstart-touchmove-touchend和鼠標序 列：mousedown-mousemove-mouseup以及鍵盤序列：keydown-keypress-keyup很相似，這并不是巧合，因為這 三種交互模式都可以描述為start-move-stop。但是，有時候兩個操作模式很像，但第三個卻不。比如在下拉菜單的例子里，鼠標和鍵盤很像，而觸摸不同。在拖放實例中，鼠標和觸摸幾乎一致，但鍵盤非常不同。在滾動層的例子里，這三種操作模式完全不同。最后是mouseover和mouseout的問題。focus和blur是它們的鍵盤模式的等價事件，但是觸摸模式沒有這樣的等價事件。就像我們在“CSS”一章看到的，在觸摸屏設備中不存在“懸?！?。

觸摸事件的不同之處

可以看出，等價事件確實存在，這取決于上下文。但是觸摸、按鍵和鼠標事件并不完全相同。當鼠標指針移入某個元素，或者用戶按下某個鼠標按鍵時，系統可以立即判斷出應該觸發哪個事件。而對于 觸摸操作來說就不同了，觸摸操作可以引出不同的動作：在你的手指觸碰屏幕的瞬間，系統還無法判斷出你的意圖。你只是想輕觸（Tap）某個元素？還是想滾動 某個可滾動元素？亦或是想縮放？還是想雙觸（Double-Tap）？瀏覽器必須等待一定時間間隔才能做出判斷。這個時間間隔并不是非常短，而是一個可察 覺的間隔。

能否合并觸摸事件與鼠標事件

我們發現，通常情況下鼠標事件和觸摸事件非常相似，但是二者還是有一些本質區別的。有了這個認識，我們就可以更好地理解微軟的指針事件，以及為什么會提出指針事件。微軟認為沒有必要分出鼠標、觸摸兩種事件。不管是鼠標指針、手指（觸摸）還是觸控筆（也叫定位筆），統稱為指針，只要通過這些指針改變了些什么，就觸發指針事件。所以，下面是微軟版本的等價事件

現在我們有了兩種事件分類方式：鼠標、觸摸分離的蘋果版本；鼠標、觸摸整合的微軟版本。到目前為止， 只有IE支持微軟的版本。其他瀏覽器都支持蘋果版本。又如我們在前面看到的，Mozilla和Google正在考慮實現指針事件 （PointerEvent）。所以未來情況可能還會發生變化。

本文參考?移動Web之觸摸和指針事件詳解

?

?

?

轉載于:https://www.cnblogs.com/jesse131/p/5079729.html

總結

以上是生活随笔為你收集整理的移动端触屏网页的触摸事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。