Распространение событий и несколько обработчиков событий

Ладно, я в замешательстве. У меня есть глобальный обработчик событий щелчка на document. На странице у меня есть несколько ссылок. Каждая ссылка обрабатывается одним и тем же обработчиком событий щелчка, который, среди прочего, предотвращает всплытие события на уровень документа и предотвращает выполнение ссылки. Одна из этих ссылок имеет специальный обработчик кликов, который должен выполнять свою работу, а затем передавать событие общему событию клика для ссылок. Но это не так.

document.onclick = function()
  {
   document.body.innerHTML += "You clicked me!"; 
};

  document.getElementsByTagName("a")[0].onclick = function(e) {
   this.innerHTML += " Click it!";
    e.stopPropagation();
    //This return false appears only to
    //prevent the link from its default action
  return false; 
  };
document.getElementById("link").onclick = function(e) {
  this.innerHTML += " Go ahead, ";
  //But this return false appears to stop
  //the propagation up to the previous event
  //I would think that removing the link below
  //would cause the event to propagate to the event
  //above which would then stop the propagation and
  //prevent the default, but apparently this is 
  //not the case; removing the line below causes
  //the link to load Google like normal
  return false;
};

Как заставить нижнее событие срабатывать и переходить к верхнему событию, которое затем отменяет событие?

Посмотрите, что я имею в виду здесь


javascript event-handling dom-events event-propagation
person Thomas Shields    schedule 20.07.2011    source источник
comment
К сожалению, сейчас у меня нет времени, чтобы написать подробный ответ, но эта ссылка может помочь объяснить: quirksmode.org/js/events_order.html   -  person James Allardice    schedule 20.07.2011
comment
Спасибо @James, эта ссылка полезна. К счастью, мне удалось разобраться со своей проблемой самостоятельно. Спасибо! :)   -  person Thomas Shields    schedule 20.07.2011
comment
К вашему сведению: события DOM уровня 0 (с префиксом on) принимают только один обработчик. Вы переопределяете это. Кроме того, вы можете найти document.links полезным для обхода.   -  person    schedule 20.07.2011
comment
@Matt только что понял это; ржу не могу. Спасибо!   -  person Thomas Shields    schedule 20.07.2011

Ответы (1)


arrow_upward
1
arrow_downward

Ха, да. использование element.on<event> просто устанавливает свойство в DOM для элемента, что означает, что каждое событие может иметь только один обработчик. Вместо этого мне нужно использовать addEventListener в сочетании с правильным использованием event.preventDefault() и event.stopPropagation()

В моих первых попытках я помещал то, что хотел, чтобы быть первым обработчиком вторым, но на самом деле это означало, что он переопределял первый. В этом случае мне нужно сначала поставить нужный обработчик, так как обработчик присоединяется к событию.

Мой пересмотренный код должен быть:

document.onclick = function()
  {
   document.body.innerHTML += "You clicked me!"; 
};
document.getElementById("link").addEventListener("click",function() {
  this.innerHTML += " Go ahead, ";
});
  document.getElementsByTagName("a")[0].addEventListener("click",function(e) {
   this.innerHTML += " Click it!"; 
    e.stopPropagation();
    e.preventDefault();
   });

http://jsbin.com/ecozep/8/edit

person Thomas Shields    schedule 20.07.2011