javascript - DOM - 同时事件的计时与 setTimeout

Question

假设我有一个包含多个子元素的元素，并且希望在鼠标进入或离开容器时运行一些代码。如果我天真地写:

var onHover = function (el, f) {
    el.addEventListener('mouseover', function () {
        f(true);
    });
    el.addEventListener('mouseout', function () {
        f(false);
    });
};

然后，在某些情况下我会得到所需的行为 - 取决于回调 f 的性质。但是，当鼠标在容器内从一个子项移动到另一个子项时，f(false) 会立即运行，随后 f(true) 也会运行。我不希望这种情况发生 - 我只希望当鼠标进入或离开整个容器时运行 f ，而不是当用户将鼠标拖动到元素上时称为机关枪样式位于容器内。

这是我想出的解决方案:

var onHover = function (el, f) {
    var previousMouseover = false;
    var receivedMouseover = false;
    var pushing = false;
    var pushEv = function () {
        if (pushing) { return; }
        pushing = true;
        setTimeout(function () {
            pushing = false;
            if (previousMouseover !== receivedMouseover) {
                f(receivedMouseover);
                previousMouseover = receivedMouseover;
            }
        });
    };
    el.addEventListener('mouseover', function () {
        receivedMouseover = true;
        pushEv();
    });
    el.addEventListener('mouseout', function () {
        receivedMouseover = false;
        pushEv();
    });
};

此解决方案与第一个解决方案一样，假设并通过以下优点进行工作:mouseout 事件在 mouseover 事件之前发送。我还想知道 that 是否由任何 W3C 文档正式指定，但这不是这个问题的主题，即使不是这样，编写一个函数也很容易尽管如此，通过设置两个单独的变量，例如在 mouseover 和 mouseout 回调中设置 receivedMouseover 和 receivedMouseout ，然后在 setTimeout 回调内部检查两者。

问题是:是否需要在任何 setTimeout 之前处理 mouseover 和 mouseout 事件由任一事件注册的回调是否运行？

Answer 1

使用 mouseenter 和 mouseleave 事件，而不是 mouseover 和 mouseout。