如何阻止Firefox在DOM节点移动时触发mouseleave事件？

Question

我通过将SVG路径元素作为其父级的最后一个子元素响应mouseenter事件，使该路径出现在其他元素的上方（SVG上不支持z-index）。但问题是，在Firefox上这会导致mouseleave事件触发。在Chrome上这个方法很好用。

// on mousenter
node.parentNode.appendChild(node)
// this triggers a mouseleave .. if i don't move the node it works

有没有人知道解决方法或其他方法?

(这段文字是关于IT技术的问题)

- David Tinker

---

哎呀，那听起来很不好看。我只能想到一个丑陋的解决方法：设置一个标志告诉你的mouseleave处理程序忽略它，并在获取事件后以及setTimeout(0)后清除该标志，例如：ignore = true; ...append(...); setTimeout(function() { ignore = false; }, 0);请注意，setTimeout在可能已将调用排队到事件处理程序的DOM操作之后（因此您的处理程序在setTimeout回调之前）， - T.J. Crowder

你尝试过使用 event.stoppropagation() 或 event.PreventDefault() 吗？ - AhammadaliPK

是的，@Robert的解决方案可能有效。如果Firefox在处理程序列表上看不到处理程序，则不会排队事件回调。唯一的问题是何时它决定触发事件，无论这个决定是否与appendChild同步（它很可能是），还是在渲染期间稍后进行。 - T.J. Crowder

@RobertLongson：你知道针对这种特定情况该怎么做吗？（我没有搞乱SVG元素的顺序，但如果有超出我平常DOM经验的黑暗角落，也不会感到惊讶。）如果你知道，那听起来更像是一个答案而不是评论。 - T.J. Crowder

我通过使用标志等方法解决了这个问题。当涉及到分发鼠标事件和SVG路径元素时，Firefox存在缺陷，特别是当鼠标快速移动时。 - David Tinker

Answer 1

在appendChild之前移除处理程序，然后在之后恢复它。

- Robert Longson

---

除非点踩者知道它不起作用（在这种情况下，那将是一个有用的评论），否则点踩似乎太严厉了。是的，答案缺乏细节，但本身并不意味着它“没有用”。 - T.J. Crowder

这样可以防止触发mouseleave事件，但仍会触发额外的mouseenter事件。我可以解决多余的mouseenter事件。 - David Tinker

如果您喜欢的话，可以移除这两个处理程序并将它们重新放回去。 - Robert Longson