.stopPropagation() 和冒泡 - 有人可以向我解释吗？答案

【问题标题】：.stopPropagation() and bubbling - can someone explain it to me?.stopPropagation() 和冒泡 - 有人可以向我解释吗？
【发布时间】：2014-04-24 07:39:49
【问题描述】：

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

【问题讨论】：

问题是你将点击处理程序绑定到.outer，所以你不能阻止事件冒泡到.outer，因为事件已经在那里冒泡了（否则它不会被触发第一名）。请参阅下面菲利克斯的回答
我想，该事件首先从.inner 开始，然后开始冒泡。我刚刚知道（在 jQuery 书中），该事件首先在特定元素上开始，然后开始冒泡。所以我现在有点困惑。
是的，冒泡从内部元素开始，然后再沿着 DOM 树向上到达外部（父）元素。但是您将单击处理程序绑定到示例中的外部元素。因此，在触发事件处理程序时，即使您单击 .inner，事件已经冒泡到 .outer

标签： jquery event-bubbling stoppropagation

【解决方案1】：

你需要使用：

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

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

因为 e.stopPropagation() 防止事件向上而不是向下 DOM 树

Updated Fiddle

【讨论】：

好的，但是当我删除你的版本中带有.stopPropagaton()的行，然后点击.outer，事件没有启动，结果和.stopPropagation()一样look here

【解决方案2】：

如果您想处理与单击 .outer 不同的单击 .inner，则应该有两个事件处理程序。在 .inner 点击处理程序中，您可以防止事件冒泡，这样点击 .inner 就不会触发 .outer 上的点击事件处理程序

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

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

【讨论】：