touch事件與click事件區別

admin發表於2019-04-15
事件

兩個事件從名稱上看差別有點大，touch事件用於移動端，click事件專注於電腦端。

但是兩者又有很大的相似之處，都是點選事件，一個是觸屏點選，一個是通過滑鼠點選。

還有讓人迷惑的一點，就是click事件用於移動端觸屏點選同樣有效。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:150px;
  height:100px;
  background-color:blue;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementsByTagName("div")[0];
  odiv.onclick = function () {
    odiv.style.backgroundColor = "red";
  }
}
</script>
</head>
<body>
  <div></div>
</body>
</html>

上述程式碼為div元素註冊click事件處理函式，點選之後將其背景顏色設定為紅色。

程式碼適用於電腦端，但是在移動端依然有效，觸屏點選同樣可以將div背景顏色設定為紅色。

雖然非常相似，兩者的區別也是巨大的，下面分佈進行一下介紹。

一.為什麼click事件可以用於移動端：

最初移動端裝置是無法訪問網頁的，電腦端一統天下，click自然順風順水。

隨著軟硬體的進步，可以在移動端上瀏覽網頁，自然要設計移動端想配套的事件。

由此觸屏相關的事件誕生，但是此時網頁絕大多數都沒有考慮移動端的。

為了相容電腦端的頁面，採取瞭如下兩個措施：

（1）.click事件在移動端依然有效，這也保全了已有的功能。

（2）.電腦端頁面較大，將其置於螢幕較小的移動裝置之中時，頁面內容在視覺上非常小，必須具有放大鏡一樣的眼睛才能看清楚，為了解決此問題，對click事件進行了一些特殊處理，裝置會檢測兩次連續的click事件之間的間隔，如果間隔小於300ms，那麼就會觸發頁面的放大或者縮小功能，這樣就差強人意的解決了使用者瀏覽頁面的問題；如果兩次點選間隔大於300ms，那麼觸發普通的點選事件，這也就是大家常說的click事件300ms延遲現象。

也可以看到，當前無需糾結於兩者的區別，因為現在都有專門針對移動端設計頁面，所以安心使用移動端配套的事件即可，當然多掌握一點知識沒有任何問題，起碼可以做到心中比較敞亮，對身體健康也是有好處的，^_^。

三.touch事件的優先順序高於click事件：

touch事件的有限級高於click事件，下面通過一段程式碼例項進行一下簡單演示。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant {
  background: red;
  width: 500px;
  height: 500px;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.addEventListener("touchstart", function (e) {
    console.log("touchstart");
  });
 
  odiv.addEventListener("touchend", function (e) {
    console.log("touchend");
  });
 
  odiv.onclick = function () {
    console.log("divclick");
  }
  document.body.onclick = function () {
    console.log("bodyclick");
  }
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/15/225541mgw40gaxgarau0b4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

使用preventDefault()可以遮蔽掉click事件，程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
odiv.addEventListener("touchstart", function (e) {
    console.log("touchstart");
    e.preventDefault();
  });

將其放入touchend事件處理函式也可以產生同樣的效果：

[JavaScript] 純文字檢視 複製程式碼
odiv.addEventListener("touchend", function (e) {
    console.log("touchend");
    e.preventDefault();
  });

非常簡單，只要記住結論即可，就不再進行截圖演示。

相關文章