jQuery stopPropagation 和 stopImmediatePropagation 比較

近期在幫公司導入 Backbone.js 技術，把後台全面改寫成 Javascript MVC 架構，技術包含 jQuery + Backbone.js + Underscore.js + Mustache Template，這些技術我想可以寫另外一篇 Backbone.js 初體驗，這邊就先不多說了，在 Backbone.js 的 View 架構裡，可以任意 bind events，程式碼如下:

RT.View = Backbone.View.extend({
initialize: function() {   
    if (this.model) {
        this.model.bind("change", this.render, this);
    }
    if (this.collection) {
        this.collection.bind("all", this.render, this);
    }
},

events: { 
  'click .add': 'add',
  'click .edit': 'edit',
  'click .delete': 'delete_item',
  'click .delete_all': 'delete_all'
},
add: function(e) {
},
)};

上面程式碼可以看到，將 click 事件綁在不同 Class 上，但是問題來了，如果同時 new 兩個 RT.View 物件，當我觸發 click 事件時，就會發生兩次一樣的效果，該如何解決這問題呢，可以透過 jQuery 的 stopPropagation 或 stopImmediatePropagation，這兩個其實很好區分，前者只會防止目前 Dom Tree 的上一層事件，後者則是會防止全部 Dom Tree 事件。

不多說直接看個例子，先以 stopPropagation 當例子

$("p").click(function(event){
  event.stopPropagation();
});
$("p").click(function(event){
  alert('test');
});
$("div").click(function(event){
  alert('test');    
});

執行過後，你會發現點選該區域只會跳出一個 alert 視窗，如果把 event.stopPropagation() 換成 event.stopImmediatePropagation() 則完全不會跳出 alert 視窗。

See also