这是理解事件冒泡概念的一个极好的示例。基于上面的答案，最终的代码如下所示。当用户单击复选框时，事件传播到其父元素“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;
               }
          });     
  });

这是理解事件冒泡概念的一个极好的示例。基于上面的答案，最终的代码如下所示。当用户单击复选框时，事件传播到其父元素“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;
               }
          });     
  });

别忘了IE:

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

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

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

取代

event.preventDefault();
return false;

with

event.stopPropagation();

event.stopPropagation ()

停止事件的冒泡 父元素，阻止任何父元素 处理程序不被通知 事件。

event.preventDefault ()

阻止浏览器执行 默认动作。使用方法 isdefaultprevent来知道是否 此方法曾经被调用(在此 事件对象)。

这里有一个对我有用的技巧:

handleClick = e => {
    if (e.target === e.currentTarget) {
        // do something
    } else {
        // do something else
    }
}

解释:我把handleClick附加到一个模式窗口的背景，但它也在模式窗口内的每次点击(因为它是在背景div)。所以我添加了条件(e.target === e.currentTarget)，这只在单击背景时才会实现。