Javascript Mouseenter在将节点移动到DOM中的另一个位置后在Firefox中多次启动

我对Firefox中的

mouseenter

/

mouseleave

意外行为有问题。我需要做的是：

在节点上注册鼠标enter后，将节点移动到DOM中的另一个位置

然后在鼠标离开后将其移回原来的位置

问题是在将节点插入另一个位置后，

mouseenter

会疯狂地启动，而

mouseleave

根本不会启动。

这里有一个说明了这一点。您应该检查控制台输出以查看mouseenter被触发的次数。这在笔下可能看起来很荒谬，但在我的应用程序中却不是。我正在给悬停时的图像添加缩放。它的一个祖先有

溢出：hidden

（我无法使用CSS）并隐藏图像的放大部分。因此，在图像被缩放后，我需要将其移动到DOM中的其他位置（同时确保它保持在屏幕上的相同位置），然后在缩放结束时将其移回原位（鼠标离开图像）

问题

---

有人能给我解释一下这里发生了什么吗？以及如何与之抗争以实现常规的

mouseenter

和

mouseleave

行为（仅发射一次）。

首先：您的变量

outer1

和

outer2

是相同的

其次，如果您正在更改node的元素，它将触发

mouseleave

，因为光标不再位于元素的顶部

我认为这就是你想要实现的目标：

var inner1=document.getElementById（“inner1”）；
var inner2=document.getElementById（“inner2”）；
var outer1=document.getElementById（“outer1”）；
var outer2=document.getElementById（“outer2”）；
var=false；
inner2.addEventListener（“鼠标指针”，函数（e）{
如果（移动）{
zoomOut（）；
}否则{
缩放（）；
}
});
函数zoom（）{
console.log（“mouseenter”）；
外部2.附加子对象（内部1）；
移动=真；
}
函数zoomOut（）{
控制台日志（“鼠标指针2”）；
外部1.追加子项（内部1）；
移动=假；
}

#outer1，
#外层2{
宽度：300px；
高度：200px；
}
#外层1{
背景颜色：绿色；
}
#外层2{
位置：绝对位置；
背景颜色：蓝色；
}
#内部2{
位置：绝对位置；
高度：70像素；
宽度：100px；
背景颜色：黄色；
}

盘旋我

我在使用D3和力定向图时遇到了同样的问题

每个节点都有一个

mouseenter

处理程序，该处理程序调用

this.parentNode.appendChild（）

将元素置于顶部。这是我所知道的唯一重新排列SVG元素的方法

这在Chrome和Safari中运行良好，但在Firefox中，它会导致循环

mouseenter

行为。也不会触发任何

mouseleave

事件

---

我现在的最佳修复方法是只在节点不是最顶层时调用

appendChild（）

（

node.nextSibling！==null

）

mouseenter

或

mouseleave

为我触发一次。我用的是Chrome43。您在什么环境下测试它？我在Debian amd64上使用Firefox 34。

appendChild（）

不会在我的Firefox 34上触发

mouseleave

。这是肯定的，因为我注册了

mouseleave

的处理程序，它从未被调用，甚至在

appendChild（）

之后也是如此。在我的应用程序中，它与笔中不同，因为光标一直停留在元素上-元素在DOM中移动，但是使用绝对定位，我确保它在屏幕上保持在相同的位置。但是这里真正的问题似乎是在调用

appendChild

之后，如何疯狂地注册

mouseenter

。当然会。因为如果它触发了

mouseleave

您将元素追加回第一个框中，

mouseenter

将再次触发，这将是一个无休止的循环。如果您的应用程序不同，请给我们一个实际会帮助您的示例。我认为这个示例显示了相同的问题。我可以重新编写它，使它更类似于我的应用程序，但首先看一下我当前笔下的控制台输出：。你的相似吗？