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);
}

Answer 2

这是一个可能的解决方案：

el.onmouseover = function(e) {
  //normalize event object to avoid cross browser inconsistencies
  e = e || window.event;

  //grab target element from which event is originated
  var target = e.target || e.srcElement;

  if (target === el) {
    //do something here
  }
};

如果您使用jQuery（），它会提供很好的.hover（）事件，它会为您处理这些问题。

Answer 3

您无法将其关闭，但您的处理程序始终可以检查event.target（或IE上的event.srcElement）以确保它与正确的相关。

或者，您可以向内部元素添加处理程序，并在事件对象上调用“stopPropagation（）”。

事件传播混乱

3 个答案: