移动端touch事件影响click事件的相关解决方法

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章