触发jQuery移动点击事件两次
我用jquery移动’tap’事件进行测试，发现每次触发都会触发两次 。 html页面的代码如下：
Demo #box{ background-color:red; width:200px; height:200px; } tapped me $(document).ready(function() { $('#box').bind('tap',function(event) { alert('why'); }); }); 更具讽刺意味的是，当我通过jsfiddle进行测试时，它只会将事件触发一次 。
这是链接。 http://jsfiddle.net/mochatony/tzQ6D/6/
经过进一步测试后，我发现将javascript放在标题部分已经消失了。
Demo #box{ background-color:red; width:200px; height:200px; } $(document).ready(function() { $('#box').bind('tap', function(event) { alert('halo'); }); }); tapped me
我无法解释为什么身体和标题部分的位置使这个不同。
我忘了我在哪里看到这个，但问题是jQuery Mobile绑定到触摸和鼠标事件以模拟“点击”，并且在某些情况下Android会触发两者。
对我preventDefault的技巧是在事件处理程序中对事件调用preventDefault 。 这将使重复事件无法触发。
至于为什么只是有时这种情况，我知道如果有人没有收听触摸版本，移动浏览器将尝试仅触发事件的鼠标版本。 检测或jQuery的委托可能存在一个问题，即启发式混淆。
您正在遇到鬼点击问题…这是一个已知的“错误”，很难解决。
那里有更多的信息：
http://forum.jquery.com/topic/tap-fires-twice-with-live-tap https://developers.google.com/mobile/articles/fast_buttons http://philosopherdeveloper.wordpress.com/2011/ 11月1日/重影的点击function于jquery的移动/
在第一个链接中，您将找到一个可以解决问题的黑客攻击。 据我所知，没有简单的解决方案:(
顺便说一句：即使它不能解决你的问题，@ Sagiv也是对的。 JQuery mobile经常使用ajax来更改页面，因此不会触发document.ready事件。
来自jQuery Mobile页面 ：
重要提示：使用$（document）.bind（’pageinit’），而不是$（document）.ready（）
你在jQuery中学到的第一件事就是在$（document）.ready（）函数中调用代码，这样一旦加载DOM就会执行所有操作。 但是，在jQuery Mobile中，Ajax用于在导航时将每个页面的内容加载到DOM中，而DOM ready处理程序仅对第一个页面执行。 要在加载和创建新页面时执行代码，您可以绑定到pageinit事件。 此事件在本页底部详细说明。
所以跳过$(document).ready() 。 更多信息在这里 。
与这个问题相关，我正在接收两个事件“点击”并在另一个事件之后“点击”。 这里的所有想法都很鼓舞人心，但我最终找到了另一种解决方案。 我将以下代码添加到我的JavaScript控制器，以根据时间戳区分连续的重复事件，幸运的是，这两个重复事件完全相同。 基本上，我所做的是存储最后使用的时间戳，如果我决定使用该事件。 第二次具有相同时间戳的事件我刚丢弃它。
var _lastEventTimestamp; var checkAndPreventDuplicatedEvent = function (e) { if (e.timeStamp === _lastEventTimestamp) return true; else _lastEventTimestamp = e.timeStamp; return false; }
$("#buttonID").tap(function(event){ if(localStorage.JQMGostClick == 0 || localStorage.JQMGostClick == "" || typeof(localStorage.JQMGostClick) === "undefined") localStorage.JQMGostClick = 1; else if(localStorage.JQMGostClick == 1){ localStorage.JQMGostClick = 0; return false; } ..... });
它对我有用，因为如果你使用移动环境，那么你可能正在使用一种存储
我发现在我的情况下，向我的页面容器中添加data-role="page"会阻止点击事件被触发两次。
之前我经历过类似的事情，这是因为我的表单不在data-role="page"
我建议用jQuery Mobile html结构包装你的代码，这样你就可以看起来像这样
tapped me
这可能不是最好的解决方案，只会在某些情况下起作用，但是对我有用的是在click事件开始后立即将该元素的CSS’指针事件’设置为’none’。 然后使用JS的setTimeout在500ms后将’pointer-events’重置为auto。
对我来说300毫秒就足够Android设备，但iPhone需要500毫秒来防止双击。
function yourEvent(evt){ $(el).css('pointer-events', 'none'); setTimeout(function(){ $(el).css('pointer-events', 'auto'); }, 500); //do you stuff }