Javascript：触发了多个mouseout事件 [英] Javascript: Multiple mouseout events triggered

问题描述

我知道Javascript中的不同事件模型（WC3模型与Microsoft模型），以及冒泡和捕获之间的区别。但是，几个小时后阅读有关此问题的各种文章，我仍然不确定如何正确编码以下看似简单的行为：

I'm aware of the different event models in Javascript (the WC3 model versus the Microsoft model), as well as the difference between bubbling and capturing. However, after a few hours reading various articles about this issue, I'm still unsure how to properly code the following seemingly simple behavior:

如果我有一个外部 div 和一个内部的 div 元素，我希望当鼠标离开外部div时触发一个鼠标输出事件。当鼠标从内部div跳到外部div时，什么都不应该发生，当鼠标从外部div跨越到内部div时，什么都不应该发生。如果鼠标从外部div移动到周围页面，该事件应仅触发。

If I have an outer div and an inner div element, I want a single mouse-out event to be triggered when the mouse leaves the outer-div. When the mouse crosses from the inner-div to the outer-div, nothing should happen, and when the mouse crosses from the outer-div to the inner-div nothing should happen. The event should only fire if the mouse moves from the outer-div to the surrounding page.

<div id="outer" style = "width:20em; height:20em; border:1px solid #F00" align = "center" onmouseout="alert('mouseout event!')" >
<div id="inner" style = "width:18em; height:18em; border:1px solid #000"></div>
</div>

现在，如果我将mouseout事件放在outer-div上，两个当鼠标从内部div移动到周围页面时会触发mouse-out事件，因为当鼠标从内部移动到外部时会触发一次事件，然后当它从外部移动到周围页面时再触发一次。

Now, if I place the "mouseout" event on the outer-div, two mouse-out events are fired when the mouse moves from the inner-div to the surrounding page, because the event fires once when the mouse moves from inner to outer, and then again when it moves from outer to the surrounding page.

我知道我可以使用 ev.stopPropagation（）取消活动，所以我尝试注册一个事件处理程序inner-div取消事件传播。但是，当鼠标从外部div移动到内部div时，这不会阻止事件触发。

I know I can cancel the event using ev.stopPropagation(), so I tried registering an event handler with the inner-div to cancel the event propagation. However, this won't prevent the event from firing when the mouse moves from the outer-div to the inner-div.

所以，除非我忽略了某些东西，在我看来，如果没有复杂的鼠标跟踪功能，这种行为是无法实现的。在将来，我计划使用更高级的框架（如JQuery）重新实现许多代码，但是现在，我想知道是否有一种简单的方法可以在常规Javascript中实现上述行为。

So, unless I'm overlooking something, it seems to me this behavior can't be accomplished without complex mouse-tracking functions. In the future, I plan to reimplement a lot of this code using a more advanced framework, like JQuery, but for now, I'm wondering if there is a simple way to implement the above behavior in regular Javascript.

推荐答案

内部div上的 mouseout 事件'冒泡'到外部div。要从外部div检测到这种情况，请检查事件的目标属性：

The mouseout event on the inner div ‘bubbles’ to the outer div. To detect that this has happened from the outer div, check the target property of the event:

<div id="outer">
    <div id="inner">x</div>
</div>

document.getElementById('outer').onmouseout= function(event) {
    // deal with IE nonsense
    if (event===undefined) event= window.event;
    var target= 'target' in event? event.target : event.srcElement;

    if (target!==this) return;
    ...
};

mouseout 的常见问题是你得到的当指针向父母移出时，即使它只是向孩子移动进入。你可以通过查找鼠标移动到的元素的祖先列表手动检测这种情况：

The usual problem with mouseout is you get it when the pointer moves "out" of the parent even if it's only moving "in" to the child. You can detect this case manually by looking up the ancestor list of the element the mouse is moving into:

    var other= 'relatedTarget' in event? event.relatedTarget : event.toElement;
    while ((other= other.parentNode).nodeType===1)
        if (other===this) return;

这是 mousein / mouseout model：它只关心哪个元素是鼠标的直接父元素。你经常想要的是 mouseenter / mouseleave 模型，它将元素树视为一个整体，所以你要只有当指针离开元素或其后代并且不直接移动到元素或它的后代时才获得 mouseleave 。

This is the mousein/mouseout model: it is only interested about which element is the mouse's immediate parent. What you more often want is the mouseenter/mouseleave model, which considers element trees as a whole, so you'd only get mouseleave when the pointer was leaving the element-or-its-descendants and not moving directly into the element-or-its-descendants.

不幸的是 mouseenter / mouseleave 目前是一个仅限IE的事件对。希望其他浏览器能够接收它，因为它有望成为DOM Level 3 Events的一部分。

Unfortunately mouseenter/mouseleave is currently an IE-only event pair. Hopefully other browsers will pick it up as it is expected to be part of DOM Level 3 Events.

这篇关于Javascript：触发了多个mouseout事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！