產生Backbone.js的

Question

如何產生僅外層div click事件上外層div的單擊事件，但不是其子

var TodoView = Backbone.View.extend({ 
    template: _.template(''), 
    events: { 
     'click #main-content li': 'AccordionChangingIcons', //For user li click event 
    }, 
}); 

的點擊這是HTML代碼。

<li class="icon-left" id="1"><i class="icon-glass"></i><span class="om-drag"></span><span class="om-delete"></span><h3 contenteditable="true" class="item">title1-goes-here</h3><div contenteditable="true" style="max-height: 100px; display: block;" class="content"> Content goes here1 check here</div></li> 

Answer 1

骨幹網使用事件代表團附加事件監聽器是在某些情況下更復雜一點與比蒙山事件直接綁定工作。

兩個jQuery和的Zepto（你沒有指定，如果您使用一個在你的骨幹應用程序，但我認爲你這樣做）

事件代表團是這樣工作的：

$(some_element).on(event, selector, function(){}) 

骨幹some_element是視圖，el元素參考，事件和選擇器，在你的例子中，click和#main-content li。所以click事件監聽器被附加到視圖的el，當你點擊視圖中的任何地方時，事件被觸發，然後jQuery/Zepto檢查單擊的元素是否匹配選擇器傳遞。這當然使得不可能聽到視圖的el元素外的元素上的事件。

現在，傳遞給這些庫中的回調函數的事件被標準化，但包含對原始（瀏覽器本地）事件對象的引用。您可以使用兩者來檢查真正點擊的內容以及是否要採取行動。

在你的例子中，你只想繼續，如果event.currentTarget === event.originalEvent.target。 currentTarget位於圖書館的規範化事件對象中，並始終指向您的li。 originalEvent.target是瀏覽器的本地事件目標，指的是實際點擊的元素，它指的是從li開始的樹中最深的嵌套節點。因此，如果兩者都指向li，那麼用戶點擊了它，而不是它的任何子女。

小提琴：http://jsfiddle.net/ZAbpD/1/

Answer 2

我想問題可以解決這樣的：通過創建外部區域的單獨視圖或通過jquery的附接的外事件 How do I detect a click outside an element?

或者：

var TodoView = Backbone.View.extend({ 
    template: _.template(''), 
    events: { 
     'click #main-content li': 'AccordionChangingIcons', //For user li click event 
    }, 
    initialize: function() { 
     $("html").on("click", this.outsideClick); 
    }, 
    outsideClick: function() { 
     //handle outside click 
    }, 
    AccordionChangingIcons: function(event) { 
     event.stopPropagation(); 
    } 
});