移動端touch事件和click事件的區(qū)別

1.touch事件

以下是四種touch事件

touchstart: ??? //手指放到屏幕上時觸發(fā)

touchmove:?? ? ?//手指在屏幕上滑動式觸發(fā)

touchend:?? ?//手指離開屏幕時觸發(fā)

touchcancel: ? ? //系統(tǒng)取消touch事件的時候觸發(fā)，這個好像比較少用

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

2.touch事件和click事件的區(qū)別

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

touchstart和click的觸發(fā)條件就有區(qū)別，對于手持設(shè)備的瀏覽器：

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

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

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.只觸發(fā)touch事件，不去觸發(fā)click事件 ?發(fā)現(xiàn)了preventDefault()的方法，阻止事件的默認(rèn)行為。
<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()方法，可以阻止后面事件的觸發(fā)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。