jQuery的命名空間不起泡，其自定義事件

Question

HTML：

<div class="parent"> 
    <div class="child1" > 
    </div> 
    <div class="child2"> 
    </div> 
</div> 

<a class="btn1">customClick.btn1</a> 
<a class="btn2">customClick.btn2</a> 

的JavaScript：

jQuery('div.child1') 
    .bind('customClick.btn1', function() { 
     alert('child1 reacted to customClick.btn1'); 
    }); 


jQuery('div.child2') 
    .bind('customClick.btn2', function() { 
     alert('child2 reacted to customClick.btn2'); 
    }); 

jQuery('div.parent') 
    .bind('customClick.btn1', function (e) { 
     alert('parent reacted to customClick.btn1'); 
    }) 
    .bind('customClick.btn2', function (e) { 
     alert('parent reacted to customClick.btn2'); 
    }); 

jQuery('a.btn1') 
    .click(function(){ 
     jQuery('div.child1').trigger('customClick.btn1'); 
    }); 

jQuery('a.btn2') 
    .click(function(){ 
     jQuery('div.child2').trigger('customClick.btn2'); 
    }); 

當我點擊a.btn1，正如所料，customClick.btn1事件被div.child1處理，而不是div.child2。不期望的是customClick事件會觸發div.parent上的處理程序customClick.btn1和customClick.btn2。這是正確的嗎？有沒有辦法讓自定義事件與他們的命名空間泡泡？換句話說，當customClick.btn1被觸發時，並不是所有的customClick的父處理程序都被處理，只有那些處理customClick.btn1的處理程序。

Answer 1

看看文檔，它看起來像當你在做命名空間時，之前的部分.是事件類型。這就是被觸發的事件。

因此，.parent元素有2個customClick事件類型綁定到它。這就是爲什麼他們都開火。

從文檔：（。）http://api.jquery.com/bind/

如果EVENTTYPE字符串包含一個週期字符，然後該事件被命名空間。句點字符將事件與其名稱空間分開。例如，在調用.bind（'click.name'，處理程序）中，字符串click是事件類型，字符串名稱是命名空間。命名空間允許我們解除或觸發某種類型的事件而不影響其他事件。

這似乎是一個合理的預期，當事件出現泡沫時會考慮命名空間，但顯然不是。

您可以改爲檢查e.target.className以查看觸發了哪個元素。還必須有一種方法來獲取可以從事件對象中測試的命名空間。

---

編輯：

看起來你可以測試事件對象的像這樣的命名空間：

if(e.handleObj.namespace === 'btn1') 

---

編輯：

正如@ Nick Craver dem在下面的評論中提到，命名空間是考慮冒泡時命名空間事件是而不是綁定到子級。就像這樣（這樣或那樣），它看起來像一個錯誤。

無論採用哪種方式，您仍應該能夠測試上面提到的名稱空間，因爲在兩種情況下，該屬性似乎都存在於Event對象中。

Answer 2

的Html

<div class="parent"> 
    <div class="child1" > 
    </div> 
    <div class="child2"> 
    </div> 
</div> 

<a class="btn1">customClick.btn1</a> 
<a class="btn2">customClick.btn2</a> 

jQuery的

jQuery('div.child1') 
    .bind('customClick', function (e) { 
     if(e.namespace == 'btn1'){ 
      console.log('child1 reacted to customClick.btn1'); 
     } 
    }); 


jQuery('div.child2') 
    .bind('customClick', function (e) { 
     if(e.namespace == 'btn2'){ 
      console.log('child2 reacted to customClick.btn2'); 
     } 
    }); 

jQuery('div.parent') 
    .bind('customClick', function (e) { 
     if(e.namespace == 'btn1'){ 
      console.log('parent reacted to customClick.btn1'); 
     } 
     if(e.namespace == 'btn2'){ 
      console.log('parent reacted to customClick.btn2'); 
     } 
    }) 


jQuery('a.btn1') 
    .click(function(){ 
     jQuery('div.child1').trigger({type:'customClick',namespace:'btn1'}); 
    }); 

jQuery('a.btn2') 
    .click(function(){ 
     jQuery('div.child2').trigger({type:'customClick',namespace:'btn2'}); 
    }); 

雖然這個作品，我喜歡做我以前做的方式。我用jQuery打開了一張票。 Ticket＃6913感謝Nick Craver和patrick dw幫助確認問題。