移動端touch事件和click事件的區別

1.touch事件

以下是四種touch事件

touchstart: ??? //手指放到屏幕上時觸發

touchmove:?? ? ?//手指在屏幕上滑動式觸發

touchend:?? ?//手指離開屏幕時觸發

touchcancel: ? ? //系統取消touch事件的時候觸發，這個好像比較少用

每個觸摸事件被觸發后，會生成一個event對象

2.touch事件和click事件的區別

在移動端，手指點擊一個元素，會經過：touchstart --> touchmove -> touchend --》click。

touchstart和click的觸發條件就有區別，對于手持設備的瀏覽器：

1.touchstart：在這個dom（或冒泡到這個dom，這當然是廢話）上手指觸摸開始即能觸發
2.click：在這個dom（或冒泡到這個dom，這當然是廢話）上手指觸摸開始，且手指未曾在屏幕上移動（某些瀏覽器允許移動一個非常小的位移值），且在這個在這個dom上手指離開屏幕，且觸摸和離開屏幕之間的間隔時間較短（某些瀏覽器不檢測間隔時間，也會觸發click）才能觸發
于是我們可以看到，完全用touchstart代替是不太可取的，但是click在移動手持設備上帶來的延遲也是一個問題

3.驗證touchstart和click事件，看誰先觸發。

html <style>.content{height:500px;background:#F00;} </style> <div class="content"></div>
js var content = document.querySelector(".content"); content.addEventListener("touchend", function(){content.style.background = "#0F0"; }); content.addEventListener("click", function(){content.style.background = "#00F"; });

上面邏輯是給content類名的div，綁定一個touch事件和一個click事件。分別讓div的背景色變成綠色和藍色。

手機測試一下，點擊一下，div是先變成綠色然后又變成藍色。

4.只觸發touch事件，不去觸發click事件 ?發現了preventDefault()的方法，阻止事件的默認行為。
<span style="color:#333333;">var content = document.querySelector(".content"); content.addEventListener("touchstart", function(e){</span><span style="color:#ff0000;"> e.preventDefault();</span><span style="color:#333333;">content.style.background = "#0F0"; }) content.addEventListener("click", function(e){content.style.background = "#00F"; });</span>通過?preventDefault()方法，可以阻止后面事件的觸發。

總結

以上是生活随笔為你收集整理的移动端touch事件和click事件的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

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