JQuery - остановка всплывающих событий во всех браузерах

Question

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

На данный момент у меня есть довольно неуклюжий код JS:

//Do something in response to the original user action
//Leave it at that.
try {
        e.stopPropagation();
    }
    catch (ex) {

    }
    try {
        event.cancelBubble();
    }
    catch (ex) {

    }

    try {
        event.preventDefault();
    }
    catch (ex) { }
...

Это работает, но пахнет и чувствует себя неправильно (лично я ненавижу пустые блоки улова). Могу ли я использовать более хитрый трюк с X-браузером?

Answer 1

Если вы используете jQuery, то просто event.stopPropagation() будет работать нормально. jQuery унифицирует обработку событий.

В общем, если вы хотите проверить специальные методы браузера, вы можете сделать так:

if(event.stopPropagation) {
    event.stopPropagation();
}
else if...

Это то, что делает jQuery. Он создает оболочку для события и предоставляет унифицированный интерфейс.

Имя объекта события определяется you . Объект события передается в качестве первого аргумента вашему обработчику событий. Вы должны настроить обработчик событий для принятия параметра, например ::

$('selector').click(function(foo) { // could be event, e, bar, whatever you want
    foo.stopPropagation();
});

Обычно используются e или event.

Answer 2

cancelBubble является логическим свойством, а не методом Event объектов.Нет необходимости в try / catch, потому что вы можете проверить необходимое свойство или метод перед его использованием.Итак, без jQuery следующее будет делать то, что вы хотите для объекта события e:

if (typeof e.stopPropagation != "undefined") {
    e.stopPropagation();
} else if (typeof e.cancelBubble != "undefined") {
    e.cancelBubble = true;
}