上周做了一個項目，發(fā)現(xiàn)一個DOM元素觸發(fā)touch事件，竟然還會觸發(fā)別的元素的click事件。
我先描述一下彭谁，當時遇到的問題。項目初始狀態(tài)是下面這張圖：
我給右上方的的搜索按鈕允扇，綁定了一個touchstart事件缠局，點擊以后出現(xiàn)一個搜索框。至于為什么不直接綁定click事件考润，是因為touch事件響應更快狭园，交互上更加流暢糊治。
這個搜索框右邊的搜索按鈕妙啃，綁定了一個click事件，點擊后立即觸發(fā)搜索俊戳。
當給這兩個DOM元素都綁定好事件以后揖赴。我們分別用android和iphone手機進行測試，得到了一個共同的結(jié)果抑胎。
當手指接觸到搜索圖標燥滑，立即觸發(fā)了該元素的touchstart事件，下面的搜索框也隨之顯示阿逃。還沒有完铭拧，這時候手指還會觸發(fā)搜索按鈕的click事件，導致搜索框提交恃锉。
整個交互變成了搀菩，點擊搜索圖標，就觸發(fā)了搜索破托，這肯定不是我們想要的肪跋。
然后就查一些資料，得到了一些理論知識土砂。最重要的一個就是事件流的概念州既，點擊事件可以分解成多個事件。
在移動端萝映，手指點擊一個元素吴叶，會經(jīng)過：touchstart --> touchmove -> touchend --》click。
事件流本身會持續(xù)進行下去的序臂。
做了幾個demo驗證了一下蚌卤，上面的理論。
首先給一個元素同時綁定touchstart和click事件奥秆，看誰先觸發(fā)逊彭。
html：
.content{height:500px;background:#F00;}
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是先變成綠色然后又變成藍色签赃。
那能不能只觸發(fā)touch事件，不去觸發(fā)click事件呢分尸？查閱相關(guān)資料锦聊，發(fā)現(xiàn)了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()方法孔庭，可以阻止后面事件的觸發(fā)。
