代码之家  ›  专栏  ›  技术社区  ›  Adrian Adkison

jquery事件命名空间冒泡问题

  •  0
  • Adrian Adkison  · 技术社区  · 14 年前

    在开发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是唯一为子级和父级触发的事件)。我知道停止传播和立即停止传播。我不想把这些放在A.B和A.C的孩子身上,因为有时我确实想让他们冒泡。例如,当我在子项上触发“a.b”时,我希望“a.b”并且只有“a.b”事件由子项和父项处理。

    谢谢

    1 回复  |  直到 14 年前
        1
  •  2
  •   Nick Craver    14 年前

    我不完全确定这个问题,但这似乎是你想要的行为: 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');
        });​