使用 jQuery.on 的 SVG 元素未触发 mouseenter/mouseleave 事件答案

【问题标题】：mouseenter/mouseleave events not firing for SVG elements using jQuery.on使用 jQuery.on 的 SVG 元素未触发 mouseenter/mouseleave 事件
【发布时间】：2012-07-11 06:16:51
【问题描述】：

看看这个jsFiddle

将 jQuery 与 SVG (Raphael 2.0) 结合使用时，mouseenter/mouseleave 似乎无法正确触发。我知道开箱即用的 SVG jQuery 不是 100% 兼容 SVG，但是，据我所知，它似乎只影响 IE9。

奇怪的是，如果您快速将鼠标移开/移出 svg 元素（确保您在这样做时立即离开 HTML 窗格）并返回到该元素上，事件确实会触发（但不是每次都触发）。为了确保 on 不是一般问题，我连接了 click 事件，每次都可以正常工作。

只是想知道是否有人知道这是错误还是已知问题？

【问题讨论】：

@StefanFandler - “据我所知，它似乎只影响 IE9”。标记为澄清。
我避免像瘟疫一样将 jQuery 与 SVG 结合使用。这是一个充满此类例外的雷区。我认为您的错误与此 forum.jquery.com/topic/1-6-2-broke-svg-hover-events 有关（两年前未解决）。
@Duopixel 是的，我看到了那个帖子，但不想发布票，直到我确定这是一个明确的错误而不是我正在做的事情。公平地说，我需要它，jQuery 与 SVG 配合得很好。似乎只是鼠标事件，它有点不可预测。我只需要改用 Raphael。
你可以使用addEventListener，即jsfiddle.net/kGykG（我猜你不需要支持旧版IE，因为$('circle')在IE 6-8中不起作用）
@Duopixel 没错，我只支持最新的浏览器。我想保持我的代码一致，所以我想现在我将恢复使用 Raphael。虽然看我的回答，但它实际上是 jQuery 中的一个错误。

标签： jquery svg internet-explorer-9 raphael mouseevent

【解决方案1】：

这是 1.7.2 中的一个错误。见ticket。

如果我使用 jQuery (edge)，问题就会消失，所以应该在下一个预定版本 (1.8) 中修复。

【讨论】：

【解决方案2】：

我认为重要的是要注意 jQuery 1.8.2 和 android via phonegap 没有使用 jq-mobile。我看到随机选择的触摸和鼠标事件并且不同步...... 含义细微差别触发 mouseEnter 和 click 与不同的触摸触发相比 touchStart（有时，如果当前甚至没有发送输入，则发生 mouseEnter）然后 2 touchEnds。如果您有一个 touchEvent 触发 mouseEnter，则第二个触摸模式（开始、结束、结束）发送一个 mouseLeave（假设您不会通过细微的点击差异随机触发点击组合）。

我的期望是它们应该在两种情况下一起触发，除了一个（触摸事件）更多地用于多点触控需求，或者认识到在通过触摸界面模拟点击事件之后不会有 mouseLeave 事件（不知何故?...）。我的另一个期望是，如果我没有为鼠标事件处理或注册监听器，但我为触摸事件做，反之亦然，根据监听或拦截的内容将发送或不发送不同的事件（返回 false？或通过 preventDefault 等停止冒泡）。

无论如何，目前在我看来，您需要以随机且不可预测的方式处理这两种类型的事件，这对我来说意味着丢弃鼠标世界中最能描述为触控设备上的“结束”事件的事件。

基本上我认为触摸不应该发送结束/进入事件，而点击也应该相当于触摸，如果我正在监听触摸，preventDefault 应该取消所述鼠标事件。

无论如何，将两者都发送并让我解决是最有意义的。我怀疑的困惑在于您只收听了它发送的事件的一半（缺少接触）。 ……祝你好运！这些想法可能会帮助某人在更高级别或更低级别的开发团队中处理混乱。（这是浏览器级别的问题吗？我想是的。）

【讨论】：