Question

对不起，标题可能有点虚伪。但在这里，想象一下我有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有可点击的类，可以点击。非常感谢你。

Answer 1

event.stopPropogation会阻止事件冒泡事件链，但是当您单击中间div时会发生冲突。我发布了您可以参考的javascript代码。在click事件侦听器中，条件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/

Answer 2

您可能想要做这样的事情

$(".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/

Answer 3

您可能需要考虑的一种方法是使用事件委派。这样，您只为每个.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/

阻止事件从子节点传播到父节点和中间节点之间

3 个答案: