javascript - 停止事件从子级到父级以及中间的传播

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代码贴出来了，大家可以引用一下。在单击事件监听器内，条件 if block 检查该事件是否在该特定 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!");

});

您也可以引用这个 fiddle :https://jsfiddle.net/9fskuunr/3/