停止事件从子项传播到父项以及子项之间的事件

Stop propagation of event from child to parent and inbetween ones

本文关键字：事件 之间 传播      更新时间：2023-09-26

对不起，标题可能有点假。 但在这里，想象一下我有 3 个这样的div：

<div id="1" class="clickable">
    <div id="2" class="some random thing">
        <div id="3" class="clickable">
        </div>
    </div>
</div>

现在想象一下我有

$('.clickable').on('click',function(){blahblah});

我希望它们都是可点击的，但不能同时点击。当我单击内部可点击的类div（其中 id 为 3）时，内部的和父的都将触发 blahblah。我知道我可以使用类似的东西

$('.clickable').on('click',function(e){e.stopPropagation(); blahblah});

但问题是即使我这样做，单击中间的孩子（ID 为 2 的那个）也会触发父级的废话。

有什么办法可以阻止吗？例如，如果这个div 并且只有这个div 不是父级而不是子级，则只有这个div 具有可点击的类，是可点击的。谢谢。

event.stopPropogation阻止事件在事件链中冒泡，但是当您单击中间的div时，这会发生冲突。我正在发布您可以参考的javascript代码。在单击事件侦听器中，条件 if 块检查事件是否在该特定div 元素中触发，从而阻止事件冒泡。

document.getElementById("outer").addEventListener('click', function(event) {
    if (event.target !== this) {
        return;
    }
    alert("You clicked outer div!");
});
document.getElementById("middle").addEventListener('click', function(event) {
    if (event.target !== this) {
        return;
    }
    alert("You clicked middle div!");
});
document.getElementById("inner").addEventListener('click', function(event) {
    alert("You clicked inner div!");
});

你也可以参考这个小提琴： https://jsfiddle.net/9fskuunr/3/

你可能

想做这样的事情

$(".clickable").click(function(e){
    e.stopPropagation(); 
    var id = $(e.target).attr('id');
    alert(id + ' is clicked');
}).children(':not(.clickable)').click(function(e) {
    return false;
});

请参阅此处的 JSFiddle：https://jsfiddle.net/3h4yvfv4/1/

您可能需要考虑的一种方法是使用事件委派。这样，您只分配一个事件处理程序，而不是为每个.clickable元素分配多个事件处理程序，这可能会给您带来性能优势，具体取决于给定页面上有多少 .clickable 元素。

使用事件委托的代码如下所示：

$(document).on('click', function(e) {
    var target = $(e.target),
        isClickable,
        closestClickable,
        isNestedInClickable;
    isClickable = target.hasClass('clickable');
    if (isClickable) {
        handleClick(e);
    } else {
        closestClickable = target.closest('.clickable');
        isNestedInClickable = !!closestClickable;
    }
    if (isClickable || isNestedInClickable) {
        e.stopPropagation();
    }
});
function handleClick(e) {
    console.log(e.target.id + ' clicked');
}

JSFiddle： https://jsfiddle.net/sytkvgng/2/

相关文章：