touch事件影响click事件探究

来源：互联网发布：湖南道县事件知乎编辑：程序博客网时间：2024/05/06 23:25

项目中遇到touch事件影响click事件的问题，输入密码后（错误的密码），点击确认支付，马上就触发了忘记密码按钮了，这显然不是我们想要的。我们想要的是用户输错密码后，用户点击忘记密码才触发事件。往下看。

什么是touchstart事件？

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

顺带说一下与touchstart比较相似的事件：

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

下面入正题：

一个button绑定touchstart事件，点击此button后使用onclick连带触发，此处连带触发的意思是使用attr函数给某元素添加onclick事件时这个onclick事件马上就被触发了，而不是到用户点击这个元素才触发。

此处为什么使用touchstart事件而不用click事件呢？因为移动端touchstart比click触发的要快，用户体验好。

例如：

$("#qezfBtn").live("touchstart",function(){

submitPay();

});

function submitPay(){

$("#btn2").attr("onclick","openUrl('url')");

}

function openUrl(url){

window.location.href=url;

}

id为qezfBtn的元素绑定了touchstart事件，当手指触摸屏幕时候触发submitPay()事件；触发submitPay时为id为btn2的函数添加onclick，添加完了之后马上就触发onclick事件了，即openUrl方法马上就被调用了。这不是我们想要的效果，我们想要的是用户点击完id为btn2的元素后才触发onclick事件，才调用openUrl方法。

原因：

涉及一个时间流的概念，点击事件可以分解成多个事件。

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

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

touchstart 触发之后，click事件还被触发了，onclick属性也被触发了。

做了个小测试：

<!DOCTYPE HTML>

<html>

<body>

<head>

$('#buttonn').live("click",function(){

alert("click");

});

$('#buttonn').live("touchend",function(){

alert("touchend");

});

</script>

</head>

<button id="buttonn">测试touch影响click事件</button>

</body>

</html>

点击button后会先弹出touchend，接着会弹出click。说明了点击事件可以分解成多个事件。

那能不能只触发touchend，不触发click呢？答案是可以的，阻止事件的默认行为，使用preventDefault() 方法。

$('#buttonn').live("click",function(){

alert("click");

});

$('#buttonn').live("touchend",function(e){

e.preventDefault();

alert("touchend");

});

解决方案，本人想到的有两个：

1、阻止事件的默认行为

$("#qezfBtn").live("touchstart",function(e){

e.preventDefault();

submitPay();

});

2、不要使用事件流中两个事件，此处事件流为touchstart --> touchmove -> touchend -->click。前面用了touchstart ，后面不使用click事件即可，可以换成ontouchstart或者ontouchend

submitPay方法换成以下这样：

function submitPay(){

$("#btn2").attr("ontouchstart","openUrl('url')");

或者 $("#btn2").attr("ontouchend","openUrl('url')");

}

参考资料：http://www.tuicool.com/articles/3QZ7jeV

0 0