javascript - 奇怪的jQuery事件冒泡

Question

我不确定这是否真的是一个事件冒泡问题。event.stopPropagation()不能解决问题。场景是：

1. 单击元素类“clickMe”（根据需要单击）
2. 然后单击li元素。点击事件将根据点击“clickMe”类的次数来执行。

以下是代码片段：

html:

<div class="clickMe">Click Me 1</div>
<div class="clickMe">Click Me 2</div>
<div class="clickMe">Click Me 3</div>
<ul id="test">
    <li><a href="#">Test A</a></li>
    <li><a href="#">Test B</a></li>
    <li><a href="#">Test C</a></li>
</ul>​​​​​​​​​​​​​​​​​​

js：

$(function() {
    $('.clickMe').live('click', function(e){
        //e.stopPropagation()
        $('li', $('#test')).live('click',function(e){
            //e.stopPropagation()
            alert('ouch')            
        })        
    })
});

提前感谢您对此问题的任何帮助或解释。

Answer 1

每当在“clikMe”元素之一上发生“点击”时，您都会向元素添加另一个点击处理程序。jQuery 代码维护了所有这些处理程序，因此在您单击“clickMe”几次后，会有几个处理程序，它们都会被调用。<li><div>

该.live()方法不是委托事件处理的最佳方式。如果您使用.on()的是新版本的 jQuery，或者至少是.delegate().

Answer 2

对于每一次点击，clickMe你都会附加一个事件，#test那就是你的 li 元素

live为现在和将来匹配选择器的所有元素附加一个事件处理程序。

将两者分开并使用

$('.clickMe').on('click', function(e) {
    //e.stopPropagation()
})
$('li', $('#test')).on('click', function(e) {
    //e.stopPropagation()
    alert('ouch');
});

Answer 3

小提琴：

http://jsfiddle.net/iambriansreed/aEkNa/

jQuery：

$(function() {
    var clickme_clicks = 0, clickme_timeout = setTimeout(function(){},0) ;

    $('.clickMe').on('click', function(e){
        clickme_clicks++;        
        clearTimeout( clickme_timeout );
        clickme_timeout = setTimeout(function(){ clickme_clicks = 0; },1000);
    });

     $('li a', $('#test')).on('click',function(e){
        e.preventDefault();
        //if(clickme_clicks == 0) return;
        alert('clicks: ' + clickme_clicks );         
    })  
});​