使用stopPropagation方法:

event.stopPropagation();

别忘了IE:

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}

代码由@mehras提供。我只是创建了一个代码片段来演示它，因为我认为这会受到赞赏，并且我想找个借口来尝试该功能。

$(document).ready(function() { $('#container').addClass('hidden'); $('#header').click(function() { if ($('#container').hasClass('hidden')) { $('#container').removeClass('hidden'); } else { $('#container').addClass('hidden'); } }); $('#header input[type=checkbox]').click(function(event) { if (event.stopPropagation) { // standard event.stopPropagation(); } else { // IE6-8 event.cancelBubble = true; } }); }); div { text-align: center; padding: 2em; font-size: 1.2em } .hidden { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"><input type="checkbox" />Checkbox won't bubble the event, but this text will.</div> <div id="container">click() bubbled up!</div>

使用jQuery时，不需要单独调用停止函数。

你可以在事件处理程序中返回false

这将停止事件并取消冒泡。

另参见event.preventDefault() vs. return false

jQuery文档:

因此，这些处理程序可以通过调用event.stopPropagation()或返回false来防止被委托的处理程序触发。

正如其他人提到的，尝试stopPropagation()。

还有第二个处理程序可以尝试:event。cancelBubble = true;它是一个特定于IE的处理程序，但至少FF支持它。我真的不太了解它，因为我自己没有用过，但如果其他方法都失败了，它可能值得一试。

这是理解事件冒泡概念的一个极好的示例。基于上面的答案，最终的代码如下所示。当用户单击复选框时，事件传播到其父元素“header”将使用event. stoppropagation();停止。

$(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
          $('#header input[type=checkbox]').click(function(event) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });