假设我有一个包含多个子元素的元素,并且希望在鼠标进入或离开容器时运行一些代码。如果我天真地写:
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
事件由任一事件注册的回调是否运行?
最佳答案
使用 mouseenter
和 mouseleave
事件,而不是 mouseover
和 mouseout
。
关于javascript - DOM - 同时事件的计时与 setTimeout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50053259/