touch事件是什么？移動端常用touch事件有哪些？

前端開發(fā)中經(jīng)常會使用事件來為元素添加交互效果，如常見的PC端鼠標(biāo)事件、鍵盤事件和其他類型的事件。但有些事件是針對移動端的，并且只在移動端產(chǎn)生，如觸摸操作相關(guān)的事件。本節(jié)將為大家介紹移動端常用的touch事件。

touch事件

touch的中文翻譯為“觸摸、接觸”。在iPhone 3GS發(fā)布的時候，其自帶的移動Safari 瀏覽器提供了一些與觸摸操作相關(guān)的新事件。隨后，Android 上的瀏覽器也實現(xiàn)了相同的事件。

touch(觸模)事件是一組事件的統(tǒng)稱，這些事件會在用戶手指觸摸屏幕的時候、手指在屏幕上滑動的時候或者當(dāng)手指從屏幕上離開的時候觸發(fā)。下面介紹主流的移動端瀏覽器支持的4種基本的touch觸摸事件，如表所示。

使用上列舉這些觸摸事件時，需要通過addEventListenerO方法向指定元素添加事件監(jiān)聽，示例代碼如下：

<style>
   .box {
     width: 50px;
     height: 50px;
     background-color: red;
   }
</style>
<div class="box"></div>
<script>
  window.onload=function() (
     //1.獲取DOM元素
     var box = document.querySelector('.box');
     //2.為元素添加事件
     //添加開始觸摸事件：當(dāng)手指觸摸屏幕時觸發(fā)
     box.addEventListener('touchstart', function (e) {
       console.log('touchstart');
     });
     //添加手指滑動事件：當(dāng)手指在屏幕上滑動時觸發(fā)
     box.addEventListener('touchmove', function(e) {
       console.log('touchmove');
     });
     //添加觸摸結(jié)束事件：當(dāng)手指離開屏幕時觸發(fā)
     box.addEventListener('touchend', function (e) {
       console.log('touchend');
     });
     //添加觸摸意外中斷事件
     box.addEventListener('touchcancel', function (e) {
       console.log('touchcancel');
     })；
   });
</script>

上述代碼中，addEventListener(方法中的第1個參數(shù)表示事件名稱，第2個參數(shù)function用來指定事件觸發(fā)時要執(zhí)行的回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)e對象表示TouchEvent對象，用于獲取當(dāng)前事件相關(guān)的信息。需要注意的是，touchstart事件和touchend事件只會觸發(fā)一次，而touchmove事件是會持續(xù)觸發(fā)的。

當(dāng)手指觸摸移動設(shè)備時，有時會出現(xiàn)多個手指同時觸摸屏幕的情況，此時稱為多點觸摸。每一個touch事件的觸發(fā)都會產(chǎn)生一個TouchEvent對象，該對象中包含了3個用于跟蹤觸摸的屬性，這些屬性用于返回不同的觸摸點集合。TouchEvent對象的3個屬性如表所示。

需要注意的是，touches和target Touches屬性只存儲接觸屏幕的觸點，而想要獲取觸點最后離開的狀態(tài)就要使用changedTouches屬性。

另外，如果用戶使用兩個手指觸摸同一個元素，此時觸摸點集合touches和targetTouches的值是相同的：如果使用一個手指觸摸元素，另一個手指觸摸元素之外的其他區(qū)域，這時觸摸點集合touches和targetTouches的值是不同的，touches用于獲取兩個觸摸點的信息列表，而 targetTouches 只能獲取觸摸元素上的信息列表。

下表中 touches、targetTouches、changedTouches觸摸點集合中每個touch對象都包含一些用于獲取觸摸信息的常用屬性，如位置、大小、形狀、壓力大小和目標(biāo)元素屬性等，touch對象的常用屬性如表所示。

上表中screenX和screenY是觸摸目標(biāo)相對于屏幕左上角的坐標(biāo)距離;clicntX和clientY是觸摸目標(biāo)相對于當(dāng)前視口(移動端屏幕)的坐標(biāo)距離;pageX和pageY是觸摸目標(biāo)相對于當(dāng)前頁面內(nèi)容(包含滾動條)的坐標(biāo)距離。