javascript - JS(或 mootools，如果首选)鼠标退出到另一个元素了吗？

Question

好的，所以，我遇到了多次遇到的奇怪情况。我正在寻找一个简单/最好的解决方案，而不是我以前使用过的过于复杂的解决方案(后来忘记了)。

你看，我有一个幻灯片。我还有几个 float 在幻灯片顶部的按钮(在此处可见:http://marsxplr.com/view-13378)

现在，当用户的鼠标滑过幻灯片时，我会显示这些按钮。但是，当用户的鼠标越过按钮时，将调用 mouseleave(即使从技术上讲鼠标仍在幻灯片上!)。这会导致按钮在鼠标经过它们时消失，这显然不是我希望发生的事情。

我通过让每个按钮在收到鼠标悬停时重新显示自己来解决这个问题。

但是现在，我们遇到了一个问题......

按钮位于幻灯片的最边缘。这意味着当调用 mouseleave 时，会发生以下两种情况之一:

答:鼠标离开按钮但没有离开幻灯片，mouseEnter 在幻灯片上被调用，这意味着不应采取任何操作，因为幻灯片最终会在其 mouseleave 中隐藏按钮。

B:鼠标完全离开了幻灯片和按钮，这意味着我们应该隐藏按钮!

所以我的问题是，如何区分这两种可能性？是的，是的，一种解决方案是始终让按钮隐藏自己——并依靠幻灯片重新显示按钮……但我担心幻灯片 onmouseenter 会在某些浏览器上的按钮 onmouseleave 之前被调用!正如您可能所说，这可能会导致问题。其实想想这个，我就已经很容易受到影响了。例如，如果鼠标从幻灯片放映到按钮，并且我的幻灯片放映的 onmouseleave 在 onmousleave 之后调用，导致按钮仍然消失...

所以，长话短说，我需要知道以下两件事之一:

• 这些事件的调用顺序是否有保证？
• 或者有什么方法可以判断在调用 mouseleave 时鼠标实际去了哪里？

如您在上面的示例中所见，我使用的是 mootools，因此 mootools 解决方案很好。但是，如果能看到 vanilla-js 解决方案也很有趣。

编辑:我的按钮是 float 的并且位于单独的 z-index 上，因此不会发生父子 DOM 关系的标准操作

Answer 1

No such problem使用标准 DOM 事件。

至于顺序，它从最深的元素向上到文档根冒泡。

还有一个可选的(请参阅下面代码中的 false 参数)捕获阶段，当顺序颠倒时。从根到光标下的每个内部元素(对于鼠标事件)。

要检查事件实际发生在原始元素的哪个内部元素上，您可以检查事件对象的 target 属性:

el.addEventListener('mouseout', function (e) {
    var target = e.target;
    if (target.classList.contains('whatever')) {
        // Do something
    }
}, false);

根据 Georges Oates Larsen 的评论，还有 relatedTarget ，专为涉及多个元素的事件而设计。