touch事件是什么？移動(dòng)端常用touch事件有哪些？

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

touch事件

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

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

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

<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.為元素添加事件
     //添加開(kāi)始觸摸事件：當(dāng)手指觸摸屏幕時(shí)觸發(fā)
     box.addEventListener('touchstart', function (e) {
       console.log('touchstart');
     });
     //添加手指滑動(dòng)事件：當(dāng)手指在屏幕上滑動(dòng)時(shí)觸發(fā)
     box.addEventListener('touchmove', function(e) {
       console.log('touchmove');
     });
     //添加觸摸結(jié)束事件：當(dāng)手指離開(kāi)屏幕時(shí)觸發(fā)
     box.addEventListener('touchend', function (e) {
       console.log('touchend');
     });
     //添加觸摸意外中斷事件
     box.addEventListener('touchcancel', function (e) {
       console.log('touchcancel');
     })；
   });
</script>

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

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

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

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

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

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