preventDefault() 在 touchstart 上捕获 mouseleave 事件答案

【问题标题】：preventDefault() traps mouseleave event on touchstartpreventDefault() 在 touchstart 上捕获 mouseleave 事件
【发布时间】：2014-04-27 02:52:02
【问题描述】：

我们有一个棘手的情况，我们使用 jquery 来防止链接在 touchstart 上触发以模拟移动设备上的悬停。问题是e.preventDefault() 的使用不仅会阻止触摸事件将我们带到链接，而且还会阻止 mouseleave 事件在另一个 div 上触发。我在

创建了一支笔

http://codepen.io/jg314/pen/DjIJe/

这正是我在说什么。当您触摸第一个块时，将触发 mouseover 事件。然后，当您触摸框 2 时，将触发 mouseleave 事件。但是，如果您触摸框 1，然后触摸框 3，mouseleave 事件不会触发，这会导致整个网站出现问题。

有什么建议吗？我们尝试了各种方法，似乎无法阻止链接点击，同时允许触发 mouseleave 事件。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

处理touchend 事件而不是touchstart 事件允许正确冒泡触发另一个元素上的mouseleave 事件的事件，同时防止在触摸设备上打开链接。我已更新示例以反映此更改：http://codepen.io/anon/pen/IqAEG

【讨论】：

我希望我们可以使用click，但不幸的是，该链接也需要在非触摸设备上单击两次。由于我们只是想在移动设备上复制悬停，我们必须使用touchstart。也就是说，至少据我所知。
啊，我现在了解您的用例了 - 如果您绑定到 touchend 而不是 touchstart 以使链接仍未打开，但正确的事件仍然冒泡以便 mouseleave火灾：codepen.io/anon/pen/IqAEG
这似乎可以解决问题。我本可以发誓我们尝试过，但我想不会。我对此有点陌生，但我很高兴将其标记为正确的解决方案。让我知道最好的方法。
很高兴它有效！我将更新原始答案，您可以将其标记为解决方案。

【解决方案2】：

设置一个或两个用于不同状态的变量。例如。一个名为 currentlyDraggingObject 或 disableAllButtons 的布尔值。然后，不要使用e.preventDefault() 禁用，而是让该函数检查您设置的状态变量并相应地进行（或不进行）。

【讨论】：

你能给我们举个例子吗？我们正在使用一个类来确定何时使用 e.preventDefault()，但这仍然会阻止 mouseleave 事件为另一个 div 触发。