.stopPropagation（）和冒泡-有人可以向我解释吗？

Question

我有一个愚蠢的问题。 有人可以解释一下，为什么事件仍然在.outer上.outer吗？ 即使当我设置了.stopPropagation() 。 我想我不正确理解这个问题。 当我单击.inner ，事件不应起泡至.outer

HTML：

<div class="outer">asdsad
    <div class="inner">asdadsasd</div>
</div>

JavaScript的：

$('.outer').on('click', function(e) {
    e.stopPropagation();
    $('.inner').toggleClass('hidden');
})

小提琴

Answer 1

您需要使用：

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

$('.outer').on('click', function (e) {   
    $('.inner').toggleClass('hidden');    
})

因为e.stopPropagation（）防止事件冒泡 ，而不是在DOM树下

更新小提琴

Answer 2

如果要处理.inner的单击与.outer的单击不同，则应具有两个事件处理程序。 然后，您可以在.inner click处理程序中防止事件冒泡，因此单击.inner不会触发.outer上的click事件处理程序。

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

$('.outer').on('click', function(e) {
   ...
});