javascript - 事件传播困惑

Question

我有一个元素嵌套在另一个元素中。我在外部元素上注册了一个 mouseover 事件。当我的鼠标进入外部元素和进入内部元素时它都会触发。如何关闭内部元素上的事件触发？

Answer 1

事件在对象上触发，然后在 DOM 树中向上冒泡。但是您可以使用 event.stopPropagation() 阻止它们冒泡。这只适用于符合标准的浏览器(不是所有浏览器，而是最新版本的 IE)。

innerElement.addEventListener('mouseover', function (event) {
    event.stopPropagation();
}, false);

IE 的版本为:

innerElement.attachEvent('onmouseover', function () {
    window.event.cancelBubble = true;
});

总而言之:

function listener(event) {
    event = event || window.event;
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}
if (innerElement.addEventListener) {
    innerElement.addEventListener('mouseover', listener, false);
} else {
    innerElement.attachEvent('onmouseover', listener);
}