小编典典

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

all

我有一个复选框,我想对单击事件执行一些 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;

阅读 69

收藏
2022-07-07

共1个答案

小编典典

代替

event.preventDefault();
return false;

event.stopPropagation();

event.stopPropagation()

停止将事件冒泡到父元素,防止任何父处理程序收到事件通知。

event.preventDefault()

阻止浏览器执行默认操作。使用方法 isDefaultPrevented 了解是否曾调用过此方法(在该事件对象上)。

2022-07-07