移动端触发touchstart事件后同时阻止click事件触发

在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。

事件流本身会持续进行下去的。

做了几个demo验证了一下，上面的理论。

首先给一个元素同时绑定touchstart和click事件，看谁先触发。

html：

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()方法，可以阻止后面事件的触发。