YUI stopEvent не работает - PullRequest
Новая
       20

YUI stopEvent не работает

1 голос
/ 24 марта 2009

Я пытаюсь предотвратить распространение событий JavaScript, используя YUI. Ниже приведен минимальный HTML-код и минимальный JavaScript-код, демонстрирующий проблему:

HTML: 

<a href="#foo" onClick="fooClickTest()" id="foo">foo</a>&nbsp;
<a href="#bar" id="bar">bar</a>&nbsp;

JavaScript: 

function fooClickTest(e) {
    alert('fooClickTest');
    YAHOO.util.Event.addListener('bar', 'click', barClickTest1);
    YAHOO.util.Event.addListener('bar', 'click', barClickTest2);
    YAHOO.util.Event.addListener('bar', 'click', barClickTest3);
    YAHOO.util.Event.preventDefault(e);
}

function barClickTest1(e) {
    alert('barClickTest1');
    YAHOO.util.Event.preventDefault(e);
}

function barClickTest2(e) {
    alert('barClickTest2');
    YAHOO.util.Event.preventDefault(e);
    YAHOO.util.Event.stopEvent(e);
// Also tried:
//  YAHOO.util.Event.stopPropagation(e);
// and:
//        if (e.stopPropagation) {
//            e.stopPropagation();
//        } else {
//            e.cancelBubble = true;
//        }
}

Что я ожидаю, так это то, что пользователь может щелкнуть «foo», чтобы добавить обработчики трех кликов, а затем нажать «bar». Затем пользователь увидит ДВА оповещения, «barClickTest1» и «barClickTest2». Вместо этого все три предупреждения происходят. YAHOO.util.Event.stopEvent (e) не делает то, что я ожидаю, что должно остановить событие, распространяющееся в barClickTest3.

Я проверил свой код в Firefox 3.0.7 и Safari 3.2.1. Как вы можете видеть выше, я также пробовал YAHOO.util.Event.stopPropagation (e) и e.stopPropagation (). Никто из них не сделал трюк.

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

Является ли мое понимание событий JavaScript просто ошибочным? Как мне достичь своих целей?

1 Ответ

9 голосов
/ 24 марта 2009

Это не работает, как вы ожидали, потому что:

  • YAHOO.util.Event.preventDefault() просто говорит браузеру не выполнять действие по умолчанию, связанное с элементом, в этом случае, переходя к атрибуту href на привязке.
  • YAHOO.util.Event.stopPropagation() отменяет всплывающее и вызывающее события событие на родительских элементах.
  • YAHOO.util.Event.stopEvent() просто звонит preventDefault и stopEvent.

Без написания дополнительного кода невозможно предотвратить срабатывание определенных прослушивателей событий на одном элементе, и даже если бы вы могли, вам не был бы гарантирован порядок запуска прослушивателей событий.

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

...