Как я могу остановить распространение событий с помощью Backbone.js?

Используя представление Backbone.js, скажем, я хочу включить следующие события:

    events: {
        'click a': 'link', 
        'click': 'openPanel' 
    }

Как я могу избежать запуска OpenPanel, когда я нажимаю ссылку. Я хочу, чтобы у меня был щелчок, который вызывает действие, но в этом поле могут быть элементы, которые должны запускать другие действия, а не родительское действие. Подумайте, например, Twitter.com и ссылки в твитах/правой панели.

Ответы

Ответ 1

Я использовал e.stopImmediatePropagation();, чтобы предотвратить распространение события. Хотелось бы, чтобы был более короткий способ сделать это. Я хотел бы вернуть false; но это связано с моим знакомством с jQuery

Ответ 2

Метод JQuery preventDefault также будет хорошим вариантом.

    window.LocationViewLI = Backbone.View.extend({
        tagName: "li",
        template: _.template('<a href="/locations/<%= id %>"><%= name %></a>'),

        events: {
            "click a": "handleClick"
        },      
        handleClick: function(event) {
            event.preventDefault();
            console.log("LocationViewLI handleClick", this.model.escape("name") );
            // debugger;
        },
        ...

Ответ 3

Каждый из обработчиков событий будет передан объект события при его запуске. Внутри обработчика вам необходимо использовать метод jQuery event.stopPropagation(). Например:

link: function(event) {  
  //do some stuff here
  event.stopPropagation();
}

Ответ 4

Два других метода, которые могут работать для вас:

1

events: {
    'click a': 'link', 
    'click *:not(a, a *)': 'openPanel' 
}

Тогда openPanel не будет записывать события click на любом <a> или дочернем элементе <a> (если у вас есть значок в тэге <a>).

2

В верхней части метода openPanel убедитесь, что цель события не была <a>:

openPanel: function(event) {
    // Don't open the panel if the event target (the element that was
    // clicked) is an <a> or any element within an <a>
    if (event && event.target && $(event.target).is('a, a *')) return;

    // otherwise it safe to open the panel as usual
}

Обратите внимание, что оба этих метода по-прежнему позволяют вызывать функцию openPanel из другого места (например, из родительского представления или другой функции в этом представлении). Просто не передавайте аргумент event, и все будет хорошо. Вам также не нужно делать ничего особенного в вашей функции link - просто обработайте событие click и перейдите к нему. Хотя вы, вероятно, еще захотите позвонить event.preventDefault().

Ответ 5

Верните "false" в свою "ссылку".