jQuery Mobile + Cordova - 两次调用“点击”警报答案

【问题标题】：jQuery Mobile + Cordova - on "tap" alert called twicejQuery Mobile + Cordova - 两次调用“点击”警报
【发布时间】：2013-12-17 21:59:13
【问题描述】：

jQM 1.3，Cordova，iOS

每次我触发一个tap事件并且该事件调用的函数包含一个alert，它会被调用两次。

在这里，这将调用alert，当我按下“确定”并尝试点击/滚动应用程序上的其他任何位置时，将显示第二个alert：

$(document).on('tap', '#mydiv', function(event) {
   event.preventDefault();
   alert('Tapped.');
   return false;
});

如果我这样做，#result 将只包含“Tapped”，它应该是这样的。

$(document).on('tap', '#mydiv', function(event) {
   event.preventDefault();
   $('#result').append('Tapped');
   return false;
});

我真的不需要alerts。只是为了调试。但是我很好奇为什么会发生这种行为。这是为什么？ 如何解决？

谢谢。

【问题讨论】：

Console.log 的行为方式是否相同？您是否将这些事件绑定到任何页面事件？
没试过控制台，因为我需要添加插件，之后总是忘记删除它。不，即使我只在<head> 中放置了没有任何其他内容的点击事件，它也会被触发两次。
试试touchstart事件。
@Omar touchstart 有效。警报仅触发一次。但我注意到关闭警报后滚动被“困住”，并且页面总是需要 2 次推动才能再次滚动（第一个滚动被“忽略”）。
删除 preventDefault() 和 rerun false。您也可以使用vclick、click 和touchend。

标签： ios jquery-mobile cordova

【解决方案1】：

您的代码有问题。如果您单击按钮多次，它将执行多次。为什么？因为一旦单击按钮，事件单击将执行 1，下一次单击将执行上一个的 1 + 1 事件单击，以此类推，如果单击多次，则为 1 + 1 + 1，... 防止多次触发事件的解决方案：
1. 使用 off() 或 one：

$(document).off().on('tap', '#mydiv', function(event) {
   event.preventDefault();
   alert('Tapped.');
   return false;
});

$(document).one('tap', '#mydiv', function(event) {
   event.preventDefault();
   alert('Tapped.');
   return false;
});

2.使用标志

var flag = true
if( flag ){
    flag = false;
    $(document).on('tap', '#mydiv', function(event) {
       event.preventDefault();
       alert('Tapped.');
       return false;
    });
}

【讨论】：

我只在 div 上点击一次。但是警报出现了两次。无论如何，您的代码 $(document).one 会阻止警报显示 2 次，但是我不想将其限制为一次性交互。 off.on 不行，我之前试过了。
问题是您没有删除旧事件并将新事件添加到元素。工作前请仔细阅读文档、教程

【解决方案2】：

我遇到了同样的问题，对我有用的解决方法是将警报包装到 setTimeout 中

setTimeout('alert("Tapped.")',250);

这可能与here 提到的问题相同，他们得出的结论是这是一个浏览器错误。

基本上，如果您从 touchend 事件触发模态警报或提示，则单击警报/提示的按钮会触发另一个 touchstart 事件，该事件针对触发原始触摸事件的同一元素，即使它在视觉上没有靠近警报/提示的地方。奇怪的是，在您的手指抬起后没有发送匹配的 touchend ......我假设这与警报是模态的并且浏览器仍在处理触发的原始 touchend 事件有关touchend/tap/vclick 和你的回调。

令人不安的是，当您下次触摸屏幕时，浏览器显然最终从警报/提示解雇，并且该事件再次针对同一来自先前触摸事件的元素，即使您的手指不在哪里元素附近。这个刷新的 touchend 事件就是为什么回调似乎开火两次。

【讨论】：

【解决方案3】：

我想补充一点：

此问题仅发生在 iOS 上，不会发生在 Android 上。
当你引入提示或类似的东西时也会发生这种情况。

在尝试了所有可能避免传播的方法后，我得出的结论是，问题与它（传播）无关，唯一真正有效的实用解决方案是 Yuriy 的解决方案，即使使用更短的延迟 (50)。

【讨论】：