Question

我有一个愚蠢的问题。有人可以解释一下，为什么事件仍然在.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');
})

Fiddle

Answer 1

您需要使用：

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

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

因为 e.stopPropagation() 会阻止事件冒泡而不是DOM树

<强> Updated Fiddle

Answer 2

如果你想处理点击.inner而不是点击.outer，你应该有两个事件处理程序。在.inner单击处理程序中，您可以阻止事件冒泡，因此单击.inner将不会触发.outer上的单击事件处理程序

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

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

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

2 个答案: