上週做了一個專案，發現一個DOM元素觸發touch事件，竟然還會觸發別的元素的click事件。

我先描述一下，當時遇到的問題。專案初始狀態是下面這張圖：

我給右上方的的搜尋按鈕，綁定了一個touchstart事件，點選以後出現一個搜尋框。至於為什麼不直接繫結click事件，是因為touch事件響應更快，互動上更加流暢。

這個搜尋框右邊的搜尋按鈕，綁定了一個click事件，點選後立即觸發搜尋。

當給這兩個DOM元素，都繫結好事件以後。我們分別用android和iphone手機進行測試，得到了一個共同的結果。

當手指接觸到搜尋圖示，立即觸發了該元素的touchstart事件，下面的搜尋框也隨之顯示。還沒有完，這時候手指還會觸發搜尋按鈕的click事件，導致搜尋框提交。

整個互動變成了，點選搜尋圖示，就觸發了搜尋。這肯定不是我們想要的。

然後就查一些資料，得到了一些理論知識。最重要的一個就是事件流的概念，點選事件可以分解成多個事件。

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

事件流本身會持續進行下去的。

做了幾個demo驗證了一下，上面的理論。

首先給一個元素同時繫結touchstart和click事件，看誰先觸發。

html：

<style>
.content{
   height:500px;
background:#F00;
}
</style>
<div class="content"></div>
 

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是先變成綠色然後又變成藍色。

那能不能只觸發touch事件，不去觸發click事件呢？查閱相關資料，發現了preventDefault()的方法，阻止事件的預設行為。

var content = document.querySelector(".content");
content.addEventListener("touchstart", function(e){
       e.preventDefault();
       content.style.background = "#0F0";
})
content.addEventListener("click", function(e){
        content.style.background = "#00F";
});

通過preventDefault()方法，可以阻止後面事件的觸發。