stopPropagation() 不适用于委托事件 [英] stopPropagation() does not work for delegate event

问题描述

我正在尝试切换 .abb-bar，每当它的父级( .abb )点击时使用 $.toggle().但是每当 .abb-bar 获得点击时，它会因为 event-bubbling 而自动切换.e.stopPropagation() 应该可以解决问题，但它不起作用.可以做什么?

HTML

<i class="fa fa-bars"></i><div class="list-group abb-bar"><button class="list-group-item list-group-item-action d-flex justify-content-center" data-user="nick">follow</button><button class="list-group-item list-group-item-action d-flex justify-content-centercomplain">complain</button><button class="list-group-item list-group-item-action d-flex justify-content-center show-entry-number" data-toggle="tooltip">'.$row['entry_id'].'

</span>

JS

$(document).on('click', '.abb', function( e ) {e.stopPropagation();$(this).children('.abb-bar').toggle();});

解决方案

您不应该在这里使用事件委托.

当事件到达 document 时，只有一个元素可以传播到 (window).它已经传播到 document 所以你不能追溯取消它已经触发的元素.这就是事件委托的本质……让事件一直冒泡，然后看看是哪个元素发起了事件.

只需要在toggle元素上设置点击事件，取消子容器上的点击事件即可.

//在切换区域设置点击事件处理程序$('.abb').on('click', function( e ) {$('.abb-bar', this).toggle();});//不要在孩子上启用点击事件$('.abb-bar').on('click', function( e ) {e.stopPropagation();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><span class="col-auto entry-ops abb"><i class="fa fa-bars">点击切换</i><div class="list-group abb-bar"><button class="list-group-item list-group-item-action d-flex justify-content-center" data-user="nick">follow</button><button class="list-group-item list-group-item-action d-flex justify-content-centercomplain">complain</button><button class="list-group-item list-group-item-action d-flex justify-content-center show-entry-number" data-toggle="tooltip">'.$row['entry_id'].'

</span>

i am trying to toggle .abb-bar, using $.toggle() whenever its parent( .abb ) gets a click. but whenever .abb-bar gets a click, its toggles itself because of event-bubbling. e.stopPropagation() should solve the problem but it does not work. what can be done?

HTML

<span class="col-auto entry-ops abb">
    <i class="fa fa-bars"></i>
    <div class="list-group abb-bar">
        <button class="list-group-item list-group-item-action d-flex justify-content-center" data-user="nick">follow</button>
        <button class="list-group-item list-group-item-action d-flex justify-content-center complain">complain</button>
        <button class="list-group-item list-group-item-action d-flex justify-content-center show-entry-number" data-toggle="tooltip">'.$row['entry_id'].'</button>
    </div>
</span>

JS

$(document).on('click', '.abb', function( e ) {
    e.stopPropagation();
    $(this).children('.abb-bar').toggle();
});

解决方案

You shouldn't be using event delegation here.

By the time the event reaches document, there's only one more element for it to propagate to (window). It has already propagated up to document so you can't retroactively cancel it for elements it's already fired on. This is the very nature of event delegation... Let the event bubble all the way up and then see which element originated the event.

You only need to set a click event on the toggle element and cancel the click event on the child container.

// Set the click event handler on the toggle area
$('.abb').on('click', function( e ) {
    $('.abb-bar', this).toggle();
});

// Don't enable the click event on the child
$('.abb-bar').on('click', function( e ) {
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="col-auto entry-ops abb">
    <i class="fa fa-bars">Click to toggle</i>
    <div class="list-group abb-bar">
        <button class="list-group-item list-group-item-action d-flex justify-content-center" data-user="nick">follow</button>
        <button class="list-group-item list-group-item-action d-flex justify-content-center complain">complain</button>
        <button class="list-group-item list-group-item-action d-flex justify-content-center show-entry-number" data-toggle="tooltip">'.$row['entry_id'].'</button>
    </div>
</span>

这篇关于stopPropagation() 不适用于委托事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！