javascript - jquery事件命名空间冒泡问题

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 子监听器上，因为有时我确实希望它们冒泡。例如，当我在 child 身上触发“a.b”时，我希望 child 和 parent 能够处理“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');
    });​