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'，handler）中，字符串单击是事件类型，字符串名称是名称空间。命名空间允许我们解除绑定或触发某种类型的事件而不影响其他事件。

似乎合理的期望是在事件冒泡时会考虑命名空间，但显然不是。

您可以检查e.target.className以查看触发了哪个元素。还必须有一种方法来获取可以从事件对象中测试的命名空间。

修改

看起来您可以测试事件对象的命名空间，如下所示：

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

修改

正如@Nick Craver在下面的评论中所示，当命名空间事件不绑定到子项时，冒泡时会考虑名称空间。因此（这种或那种）它似乎是一个错误。

无论哪种方式，您仍然可以如上所述测试命名空间，因为在两种情况下，属性似乎都存在于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感谢Nick Craver和patrick dw帮助确认问题。

jQuery命名空间不会冒泡哪个自定义事件

2 个答案: