2

好的，所以，我有一个奇怪的情况，我多次遇到过。我正在寻找一个简单/最好的解决方案，而不是我之前使用的过于复杂的解决方案（并且已经忘记了）。

你看，我有一个幻灯片。我还有几个按钮浮动在幻灯片顶部（可见此处： http: //marsxplr.com/view-13378）

现在，当用户的鼠标移到幻灯片上时，这些按钮就会出现。然而，当用户的鼠标移到按钮上的那一刻，mouseleave 被调用（即使鼠标在技术上仍然在幻灯片上！）。这会导致按钮在鼠标移过它们时消失，这显然不是我想要发生的事情。

我解决了这个问题，然后让每个按钮在收到鼠标悬停时重新显示它自己。

但是现在，我们有一个问题......

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

A：鼠标离开了按钮但没有离开幻灯片，并且在幻灯片上调用了 mouseEnter 意味着不应该采取任何行动，因为幻灯片最终会负责将按钮隐藏在其 mouseleave 中。

B：鼠标只是离开了幻灯片和按钮，这意味着我们应该隐藏按钮！

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

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

  • 这些事件的调用顺序是否有保证？
  • 或者有没有办法告诉鼠标在调用 mouseleave 时实际去了哪里？

正如您在上面的示例中看到的那样，我使用的是 mootools，所以 mootools 解决方案很好。然而，看到一个 vanilla-js 解决方案也会很有趣。

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

4

1 回答 1

2

标准 DOM 事件没有这样的问题。

至于顺序，它从最深的元素一直到文档根目录。

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

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

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

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

于 2012-09-12T07:31:25.290 回答