移动端触屏网页的触摸事件
PC端網(wǎng)頁從無到有發(fā)展至今，人們習(xí)慣了鼠標(biāo)與鍵盤的人機交互模式，因此在PC端網(wǎng)頁開發(fā)中一般使用鼠標(biāo)事件和鍵盤事件。
mouse事件：
onclick事件：在單擊鼠標(biāo)左鍵或右鍵時發(fā)生。
ondoubleclick事件：在雙擊鼠標(biāo)左鍵時發(fā)生。
onmousedown事件在單擊鼠標(biāo)按鈕（左鍵、右鍵或中鍵）并且尚未松開時發(fā)生。
onmousemove事件：在鼠標(biāo)光標(biāo)移動時發(fā)生。
onmouseup事件：在松開鼠標(biāo)按鈕（左鍵、右鍵或中鍵）時發(fā)生。
onmouseover事件：在鼠標(biāo)光標(biāo)移動到對象上時發(fā)生。
onmouseout事件：在鼠標(biāo)光標(biāo)離開對象時發(fā)生。
ommousewheel事件：在移動鼠標(biāo)滾輪時發(fā)生。
keyboard事件：
onkeypress事件：按下并釋放某個鍵進時發(fā)生。
onkeydown事件：按鍵后（釋放該鍵之前）發(fā)生。
onkeyup事件：釋放某鍵時發(fā)生。
隨著科技的發(fā)展，觸屏設(shè)備越來越多，觸屏設(shè)備的人機交互模式（包含多點觸控技術(shù)）有點擊、雙擊、拖拽、輕劃、縮小、放大、按壓、雙指點擊、按住拖拽、旋轉(zhuǎn)等詳見移動交互小白的學(xué)習(xí)筆記——手勢篇。?現(xiàn)在，觸摸、傳統(tǒng)鼠標(biāo)、鍵盤三種交互模式并存。Web開發(fā)人員需要確保網(wǎng)站適應(yīng)這三種交互模式。
今天這里只介紹幾種普及得比較好的觸摸事件，你可以在絕大多數(shù)現(xiàn)代瀏覽器中來測試這一事件（必須是觸屏設(shè)備哦）：
touchstart：在用戶的手指觸摸屏幕的瞬間觸發(fā)。
touchmove：在用戶移動手指的過程中連續(xù)觸發(fā)。
touchend：用戶的手指離開屏幕的瞬間觸發(fā)。
touchcancel：其含義取決于瀏覽器。
touchcancel
我承認(rèn)我不太明白touchcancel事件。touchcancel在觸摸序列被取消時觸發(fā)。但是這意味著什么完全取決于瀏覽器的實現(xiàn)：Chrome瀏覽器在用戶的手指離開屏幕的瞬間觸發(fā)touchcancel事件，但其他大多數(shù)瀏覽器則沒有。幸運的是，我還沒有發(fā)現(xiàn)必須使用touchcancel的情景。貌似其他腳本和庫也幾乎沒有使用 touchcancel。有些代碼為了安全起見，把它等同于touchend。
而每個觸摸事件都包括了三個觸摸列表，每個列表里包含了對應(yīng)的一系列觸摸點（用來實現(xiàn)多點觸控）：
touches：當(dāng)前位于屏幕上的所有手指的列表。
targetTouches：位于當(dāng)前DOM元素上手指的列表。
changedTouches：涉及當(dāng)前事件手指的列表。
每個觸摸點由包含了如下觸摸信息（常用）：
identifier：一個數(shù)值，唯一標(biāo)識觸摸會話（touch session）中的當(dāng)前手指。一般為從0開始的流水號（android4.1，uc）
target：DOM元素，是動作所針對的目標(biāo)。
pageX/pageX/clientX/clientY/screenX/screenY：一個數(shù)值，動作在屏幕上發(fā)生的位置（page包含滾動距離,client不包含滾動距離，screen則以屏幕為基準(zhǔn)）。
radiusX/radiusY/rotationAngle：畫出大約相當(dāng)于手指形狀的橢圓形，分別為橢圓形的兩個半徑和旋轉(zhuǎn)角度。
?
等價事件
目前這兩種交互模式都有自己的一套事件，但這并不意味著它們是完全無關(guān)且不同的。事實上，某些事件是等價的。下面的表格給出了這方面的情況。
很顯然，觸摸動作序列：touchstart-touchmove-touchend和鼠標(biāo)序 列：mousedown-mousemove-mouseup以及鍵盤序列：keydown-keypress-keyup很相似，這并不是巧合，因為這 三種交互模式都可以描述為start-move-stop。但是，有時候兩個操作模式很像，但第三個卻不。比如在下拉菜單的例子里，鼠標(biāo)和鍵盤很像，而觸摸不同。在拖放實例中，鼠標(biāo)和觸摸幾乎一致，但鍵盤非常不同。在滾動層的例子里，這三種操作模式完全不同。最后是mouseover和mouseout的問題。focus和blur是它們的鍵盤模式的等價事件，但是觸摸模式?jīng)]有這樣的等價事件。就像我們在“CSS”一章看到的，在觸摸屏設(shè)備中不存在“懸停”。
觸摸事件的不同之處
可以看出，等價事件確實存在，這取決于上下文。但是觸摸、按鍵和鼠標(biāo)事件并不完全相同。當(dāng)鼠標(biāo)指針移入某個元素，或者用戶按下某個鼠標(biāo)按鍵時，系統(tǒng)可以立即判斷出應(yīng)該觸發(fā)哪個事件。而對于 觸摸操作來說就不同了，觸摸操作可以引出不同的動作：在你的手指觸碰屏幕的瞬間，系統(tǒng)還無法判斷出你的意圖。你只是想輕觸（Tap）某個元素？還是想滾動 某個可滾動元素？亦或是想縮放？還是想雙觸（Double-Tap）？瀏覽器必須等待一定時間間隔才能做出判斷。這個時間間隔并不是非常短，而是一個可察 覺的間隔。
能否合并觸摸事件與鼠標(biāo)事件
我們發(fā)現(xiàn)，通常情況下鼠標(biāo)事件和觸摸事件非常相似，但是二者還是有一些本質(zhì)區(qū)別的。有了這個認(rèn)識，我們就可以更好地理解微軟的指針事件，以及為什么會提出指針事件。微軟認(rèn)為沒有必要分出鼠標(biāo)、觸摸兩種事件。不管是鼠標(biāo)指針、手指（觸摸）還是觸控筆（也叫定位筆），統(tǒng)稱為指針，只要通過這些指針改變了些什么，就觸發(fā)指針事件。所以，下面是微軟版本的等價事件
現(xiàn)在我們有了兩種事件分類方式：鼠標(biāo)、觸摸分離的蘋果版本；鼠標(biāo)、觸摸整合的微軟版本。到目前為止， 只有IE支持微軟的版本。其他瀏覽器都支持蘋果版本。又如我們在前面看到的，Mozilla和Google正在考慮實現(xiàn)指針事件 （PointerEvent）。所以未來情況可能還會發(fā)生變化。
本文參考?移動Web之觸摸和指針事件詳解
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/jesse131/p/5079729.html
總結(jié)
以上是生活随笔為你收集整理的移动端触屏网页的触摸事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python使用中文注释和输出中文（原创
- 下一篇： 关于comparable与compara