上周做了一个项目，发现一个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()方法，可以阻止后面事件的触发。