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/

Если строка содержит типСобытия период символа, то событие в пространстве имен. Символ периода отделяет событие от его пространства имен. Например, в вызове .bind ('click.name', handler), щелчок по строкам - это тип события, а имя строки - это пространство имен. Namespacing позволяет нам отключать или запускать некоторые события типа, не затрагивая других.

Казалось бы, разумное ожидание того, что пространство имен будет рассмотрено, когда событие пузырится, но, по-видимому, нет.

Вы можете вместо этого проверить e.target.className, чтобы увидеть, какой элемент был запущен. Также должен быть способ получить пространство имен, которое вы могли бы проверить из объекта события.

---

EDIT:

Похоже, вы могли бы проверить для пространства имен объекта события, как это:

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

---

EDIT:

Как @ Ник Крейвер дем onstrated в комментарии ниже, пространство имен is рассматривается при барботировании, когда события с именами не привязаны к детям. Как таковой (так или иначе) это кажется ошибкой.

В любом случае, вы все равно сможете проверить пространство имен, как указано выше, поскольку свойство, кажется, присутствует в объекте 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. Билет № 6913 Спасибо Ник Крейвер и Патрик Дв за помощь в подтверждении этой проблемы.