我有一个复选框,我想要在Click事件上执行一些Ajax操作,但是这个复选框也在一个容器中,该容器有它自己的单击行为,我不想在单击该复选框时运行该行为.此示例说明了我要做的事情:

$(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) {
    // Do something
  });
});
#container.hidden #body {
  display: none;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="container">
  <div id="header">
    <h1>Title</h1>
    <input type="checkbox" name="test" />
  </div>
  <div id="body">
    <p>Some content</p>
  </div>
</div>

然而,我不知道如何在不导致默认单击行为(复选框变为选中/未选中)不运行的情况下停止事件冒泡.

以下两项都会停止事件冒泡,但也不会更改复选框状态:

event.preventDefault();
return false;

推荐答案

代替

event.preventDefault();
return false;

使用

event.stopPropagation();

event.stopPropagation()

停止冒泡事件以 父元素,防止任何父元素 处理程序不会收到有关 事件.

event.preventDefault()

阻止浏览器执行

Javascript相关问答推荐

为什么函数不使用以前函数返回的参数?

Vue v模型检测父参考更改

使用Apps Script缩短谷歌表中的URL?

添加/删除时React图像上传重新渲染上传的图像

如何最好地从TypScript中的enum获取值

如何在RTK上设置轮询,每24小时

防止用户在selectizeInput中取消 Select 选项

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

如何在Obsidian dataview中创建进度条

在grafana情节,避免冲突的情节和传说

编剧如何获得一个div内的所有链接,然后判断每个链接是否都会得到200?

Web Crypto API解密失败,RSA-OAEP

使用getBorbingClientRect()更改绝对元素位置

获取';无法解决导入和导入";slick-carousel/slick/slick-theme.css";';错误

如何在FastAPI中为通过file:/URL加载的本地HTML文件启用CORS?

删除元素属性或样式属性的首选方法

当从其他文件创建类实例时,为什么工作线程不工作?

如何使用画布在另一个内部绘制一个较小但相同的形状,同时保持恒定的边界厚度?

如何更改Html元素S的 colored颜色 ,然后将其褪色为原始 colored颜色

Cherrio JS返回父div的所有图像SRC