stopPropagation: element.addEventListener против атрибута onclick - PullRequest
Новая
       2

stopPropagation: element.addEventListener против атрибута onclick

3 голосов
/ 18 апреля 2011

Я играю с stopPropagation, адаптируя код из MDC doc .

Вот вопрос: все работает нормально, если я делаю то, что они сделали, и использую element.addEVentListener("click", fname).
Но, когда я пытаюсь присоединить функцию с атрибутом onclick элемента (<div onclick="fname();">), распространение не останавливается.
И если я использую <div onclick="function(ev) {fname();}">, fname () вообще не вызывается (я также пытался передать fname(ev) с теми же результатами).

Идеи кого-нибудь? Дайте мне знать, если вам нужно увидеть код.

Ответы [ 2 ]

9 голосов
/ 18 апреля 2011

На самом деле ваше мероприятие действует следующим образом:

Событие Fires, фаза захвата, Bubbling фаза, событие имеет действие по умолчанию применяется.

Таким образом, чтобы остановить распространение, вы можете сделать следующее: 

element1.addEventListener('click',fname,true)  // Capturing phase
element1.addEventListener('click',fname,false) // Bubbling phase

fname(event){
  event.stopPropagation();
//event.preventDefault(); is also available here (in both phases I believe)
}

Обратите внимание, что распространение может быть остановлено только во время фазы пузырьков, и только использование обработчиков событий таким образом позволяет прерывать событие.

Насколько я знаю традиционный метод 

<div onclick="return fname();">

не позволяет эту функцию.

8 голосов
/ 18 апреля 2011

Когда вы делаете это: 

<div onclick="fname();">

Вы не назначаете fname в качестве обработчика событий, вы звоните fname из в пределах ваш обработчик событий (который является анонимной функцией, созданной для вас).Таким образом, ваш первый параметр - это то, что вы передаете в fname, и в указанном вами коде вы ничего не передаете в него.

Вы бы хотели: 

<div onclick="fname(event);">

Но дажеэто не будет надежным, потому что предполагается, что либо автоматически сгенерированная анонимная функция принимает параметр event с именем event, либо вы используете IE или браузер, который делает вещи, подобные IE, и выглядя на глобальное свойство window.event IE.

Более надежная вещь, которую нужно сделать, это: 

<div onclick="return fname();">

... и имеют fname return false, если он хочет обаостановите распространение и предотвратите действие браузера по умолчанию.

Все это, почему я настоятельно рекомендую всегда использовать методы DOM2 (addEventListener, то есть attachEvent - с немного другими аргументами - в IE до IE9) для перехватаобработчики, если вы хотите сделать что-нибудь интересное в этом событии (или 9 раз из 10, даже если вы этого не сделаете).

Не по теме : И этовся территория является одной из причин, я рекомендую использовать библиотекунапример, jQuery , Прототип , YUI , Закрытие или любой из нескольких других для сглаживания различий браузера дляВы, так что вы можете сосредоточиться на своей работе.

...