jQuery移动点击事件两次触发 [英] jQuery mobile tap event triggered for twice
问题描述
我对jquery移动点击"事件进行了测试，发现每次触发它都会触发两次. html页面的代码如下:
I tested with jquery mobile 'tap' event and found it fired two times, everytime it is triggered. Code as below for a html page:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
<style>
#box{
background-color:red;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="box">
tapped me
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('tap',function(event) {
alert('why');
});
});
</script>
</body>
</html>
更具讽刺意味的是，当我在jsfiddle上对此进行测试时，它仅触发事件一次 .
More irony is when I test this over jsfiddle, it only fired the event for one time.
这是链接. http://jsfiddle.net/mochatony/tzQ6D/6/
进一步测试后，我发现该错误已消失，只需将javascript放在标头部分即可.
After further testing I found out the bug has gone away with placing the javascript at header section.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js">
</script>
<style type="text/css">
#box{ background-color:red; width:200px; height:200px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('tap', function(event) {
alert('halo');
});
});
</script>
</head>
<body>
<div id="box">
tapped me
</div>
</body>
</html>
我无法解释为什么正文和标题部分的位置会有所不同.
I couldn't explained why the placement at the body and header section make this different.
推荐答案
我忘记了在哪里看到的，但是问题是jQuery Mobile绑定了触摸和鼠标事件，以便模拟敲击"，并且在某些情况下Android会同时触发这两种情况.
I forget where I saw this, but the issue is that jQuery Mobile is binding to both touch and mouse events in order to simulate "tap," and in some circumstances Android will fire both.
对我有用的技巧是在事件处理程序中的事件上调用preventDefault.这样可以避免重复事件的发生.
The trick that has worked for me is to call preventDefault on the event in your event handler. That will keep the duplicate event from firing.
至于为什么只有有时候如此，我知道如果有人不听触摸版本，移动浏览器将尝试仅触发事件的鼠标版本.检测或jQuery的委托可能存在问题，使该启发式方法感到困惑.
As far as why this is the case only sometimes, I know that mobile browsers will try to only fire the mouse version of the event if someone isn't listening to the touch version. There may be an issue with detection or jQuery's delegation that is confusing that heuristic.
这篇关于jQuery移动点击事件两次触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
