Question

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

点击元素类'clickMe'（尽可能多次点击）
然后点击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”<li>元素上发生“点击”，您就会将另一个点击处理程序添加到<div>元素中。 jQuery代码维护所有这些处理程序，所以在你点击“clickMe”几次后，有几个处理程序，它们都将被调用。

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

Answer 2

对于clickMe上的每次点击，您都会将事件附加到#test这是您的元素

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

将两者分开并使用on

$('.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 );         
    })  
});

奇怪的jquery事件冒泡

3 个答案: