jQuery Mobile 重复触发器解释答案

【问题标题】：jQuery Mobile Duplicate Triggers ExplainedjQuery Mobile 重复触发器解释
【发布时间】：2013-05-24 18:38:52
【问题描述】：

我了解到，当您在 jQuery Mobile 中创建侦听器时：

$('.this-class').on('swipe',tapHandler);

tapHandler 将运行两次。为了消除这个问题，我看到了多种解决方案，例如：

$('.page-card').off('swipe').on('swipe',tapHandler);

或

如果您在pagebeforeshow 中创建动态内容，请将其包装在pageinit 的一侧，以消除抖动问题，如here 所示。

我也明白，甚至冒泡也在这里发挥作用。

但是，我希望有人能解释为什么这个 known 存在，以及为什么 jQuery 的贡献者决定走这条路，知道它的缺点。

【问题讨论】：

你确定不绑定两次吗？ AFAIR，我从来没有遇到过滑动事件的这个问题。
是的，我确定我没有绑定两次。第一个代码示例只找到一次。 tapHandler() 函数中唯一的东西是console.log('trigger'); 每次我滑动都会收到两次“触发”消息。

标签： javascript jquery-mobile jquery jquery-on

【解决方案1】：

首先让我们讨论一下 jQuery Mobile 的工作原理。与普通网页使用 jQuery 不同 jQuery Mobile 使用 ajax 将页面加载到 DOM 中，一个或多个页面可以被加载。正因为如此，经典文档就绪是无用的，所以 jQM 开发人员创建了页面事件。

页面事件是这个故事的主要内容。虽然文档就绪每页只会触发一个，但大多数页面事件会触发多次，具体取决于重新/访问页面的时间。

让我们回到 on 函数（以及所有其他类似的函数，如 bind、delegate、已弃用的 live）。同样，在处理普通页面时，您永远不会遇到这种情况，因为同一页面永远不会停留在 DOM。

jQuery Mobile来了。如果您在 pageshow（或类似的页面事件）中使用绑定方法，该事件将一遍又一遍地绑定。基本上 on 方法从未打算像这样使用。

如果您想了解更多有关预防方法的信息，请查看我的其他answer，查找主题：防止多个事件绑定/触发

【讨论】：

好的。我的问题是，在运行$('.this-class').on('swipe',tapHandler); 时，即使我没有移动到不同的视图，tapHandler 也会在一次滑动时启动两次。是什么导致了这种情况发生？
看不到你的代码就无法告诉你。你能把你的项目邮寄给我吗，或者至少创建一个较小的骨架版本，这样我就可以告诉你哪里出了问题。
$(document).ready(function(){ var isDown = false; $('.page-card').off().on('swipe',tapHandler); $('body').off('vmousedown').on('vmousedown',down); $('body').off('vmouseup').on('vmouseup',isUp); $('body').off('vmousemove').on('vmousemove',recorder); function tapHandler(event) { console.log(event); } function down(event) { isDown = true; console.log('down'); } function isUp(event) { isDown = false; console.log('up'); } function recorder(event) { if(isDown) { console.log('moving'); return event.pageX; } } }); 整个文件。现在只是测试一些东西。