Путаница в распространении событий

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

В общем:1009 *

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 (или event.srcElement в IE), чтобы убедиться, что он относится к правильному.обработчик внутреннего элемента и вызовите его «stopPropagation ()» для объекта события.