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

Question

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

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

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

Answer 1

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

Answer 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;
        },
        ...

Answer 3

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

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

Answer 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's safe to open the panel as usual
}

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

Answer 5

Верните «false» в вашу функцию «link».