本文探讨了移动端touchstart事件触发后导致click事件误触发的问题，并提供了两种解决方案：一是阻止touchstart事件的默认行为；二是避免使用click事件，改用ontouchstart或ontouchend。
项目中遇到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>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$('#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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
