Javascript 如何在复选框单击时停止事件冒泡

我有一个复选框，我想对单击事件执行一些Ajax操作，但是该复选框也在一个容器中，具有自己的单击行为，我不想在单击该复选框时运行它。此示例说明了我要执行的操作：

$（文档）.ready（函数（）{
$（'容器'）.addClass（'隐藏'）；
$（'#标题'）。单击（函数（）{
if（$（'#container'）.hasClass（'hidden'））{
$（“#容器”）.removeClass（'hidden'）；
}否则{
$（'容器'）.addClass（'隐藏'）；
}
});
$（“#标题输入[类型=复选框]”）。单击（函数（事件）{
//做点什么
});
});
#container.hidden#body{
显示：无；
}

标题
一些内容

使用停止播放法：

event.stopPropagation();

替换

event.preventDefault();
return false;

与

事件。停止播放（）

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

event.preventDefault（）

阻止浏览器执行
默认操作。使用该方法
我想知道
这个方法曾经被调用过
事件对象）

正如其他人提到的，请尝试
stopPropagation（）

还有第二个处理程序要尝试：
event.cancelBubble=true它是IE特定的处理程序，但至少在FF中受支持。我对它不太了解，因为我自己也没用过，但如果其他方法都失败的话，也许值得一试。
别忘了IE:

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

这是理解事件冒泡概念的一个很好的例子。根据以上答案，最终代码如下所述。当用户单击复选框时，将使用
event.stopPropagation（）停止向其父元素“header”的事件传播

$(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;
               }
          });     
  });

使用jQuery时，不需要单独调用stop函数

您只需在事件处理程序中返回
false

这将停止事件并取消冒泡

也看到

从jQuery文档中：

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

该代码归功于。我只是创建了一个片段来演示它，因为我认为这会很感激，我想找个借口来尝试这个功能


$（文档）.ready（函数（）{
$（'容器'）.addClass（'隐藏'）；
$（'#标题'）。单击（函数（）{
if（$（'#container'）.hasClass（'hidden'））{
$（“#容器”）.removeClass（'hidden'）；
}否则{
$（'容器'）.addClass（'隐藏'）；
}
});
$（“#标题输入[类型=复选框]”）。单击（函数（事件）{
if（event.stopPropagation）{//标准
event.stopPropagation（）；
}else{//IE6-8
event.cancelBubble=true；
}
});
});
div{
文本对齐：居中；
填料：2米；
字体大小：1.2em
}
.隐藏{
显示：无；
}

复选框不会使事件冒泡，但此文本将冒泡。
click（）冒泡了在angularjs中，这应该有效：

event.preventDefault(); 
event.stopPropagation();

以下是一个对我有效的技巧：

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

说明：我将
handleClick
附加到模式窗口的背景上，但它也会在模式窗口内的每次单击中触发（因为它位于background div中）。因此，我添加了条件
（e.target===e.currentTarget）
，该条件仅在单击背景时满足。
出于某种原因，这对我不起作用，但返回false did。如果使用
.live（）
方法绑定事件，则这将不起作用。您必须使用
返回false本身。这使用jQuery的
.on（）
方法工作（live现在不推荐使用）。我不明白为什么return false不起作用。我花了很长时间才弄明白这个事件。preventDefault（）在IE8中没有显示复选标记，但在其他浏览器中运行良好。我找到这个答案后，我修复，然后谷歌与默认值，IE8，复选框作为关键字，把我带到这里。没有工作。。但是这两行没有返回false-->event.preventDefault（）；event.stopPropagation（）；我发现了一篇关于这个问题的文章，可能对其他堆栈溢出程序有所帮助。这个答案来自2012年。2015年，请不要忘记IE。这同样适用于IE9。我的IE9测试机被stopPropagation（）阻塞，但喜欢cancelBubble（）。遗憾的是，有些人/组织在2016年仍在使用IE9。我们这些公司客户不能忽视这一点。我喜欢2019年的ie5代码，它实际上展示了如何使用事件变量，谢谢。你能解释一下你的答案吗，它是如何工作的，以便未来的读者能够清楚地了解。
handleClick = e => {
    if (e.target === e.currentTarget) {
        // do something
    } else {
        // do something else
    }
}