Question

在开发jQuery插件时，我偶然发现了事件命名空间的问题。

这是html

<div class="parent">
    <div class="child">
    </div>
</div>

<a class="btn-a">trigger a</a>
<a class="btn-b">trigger b</a>
<a class="btn-c">trigger c</a>

这是jQuery

jQuery('#content div.child')
    .bind('a.a',function(){alert('a-child');})
    .bind('a.b',function(){alert('b-child');})
    .bind('a.c',function(){alert('c-child');});


jQuery('#content div.parent')
    .bind('a.b',function(){alert('b-parent');})
    .bind('a.c',function(){alert('c-parent');});


jQuery('a.btn-a')
    .click(function(){
         jQuery('#content div.child').trigger('a.a');
     });


jQuery('a.btn-b')
   .click(function(){
       jQuery('#content div.child').trigger('a.b');
   });


jQuery('a.btn-c')
    .click(function(){
        jQuery('#content div.child').trigger('a.c');
    });

总而言之，我已将一个名称空间事件监听器附加到子级和父级，并创建了三个触发每个事件的按钮（a.a，a.b，a.c）。请注意，父级只是监听a.b和a.c.当我单击触发子节点上的a.a的按钮时，只触发a.a的div.child侦听器，但整个'a'命名空间事件冒泡到div.parent侦听器，a.b和a.c，并触发它们。我的问题是，我如何仍然使用事件命名空间，但只有预期的事件冒泡（即a.a是唯一触发子和父的事件）。我知道stopPropagation和stopImmediatePropagation。我不想把这些放在孩子a.b和a.c听众身上，因为有时候我希望他们泡泡。例如，当我在孩子身上触发'a.b'时，我希望孩子和父母可以处理'a.b'和'a.b'事件。

由于

Answer 1

我不完全确定这个问题，但看起来这就是你想要的行为：http://jsfiddle.net/cHrSG/

在事件之后命名空间，而不是之前，因此格式为event.namespace，the jQuery docs have a thorough read here。如果你交换它们代码有预期的效果，至少我认为这是你期望的最好，我可以从问题中得知：

jQuery('#content div.child') .bind('a.a',function(){alert('a-child');}) .bind('b.a',function(){alert('b-child');}) .bind('c.a',function(){alert('c-child');}); jQuery('#content div.parent') .bind('b.a',function(){alert('b-parent');}) .bind('c.a',function(){alert('c-parent');}); jQuery('a.btn-a') .click(function(){ jQuery('#content div.child').trigger('a.a'); }); jQuery('a.btn-b') .click(function(){ jQuery('#content div.child').trigger('b.a'); }); jQuery('a.btn-c') .click(function(){ jQuery('#content div.child').trigger('c.a'); });

jquery事件命名空间冒泡问题

1 个答案: