如何使用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

每個事件處理程序在觸發時都會傳遞一個事件對象。 在處理程序中，您需要利用jQuery的event.stopPropagation（）方法。 例如：

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功能中執行任何特殊操作 - 只需處理單擊事件並繼續操作即可。 雖然您可能仍想調用event.preventDefault() 。

Answer 5

在“鏈接”功能中返回“false”。