如何停止复选框上的事件冒泡

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个复选框，希望对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="http://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();

停止将事件冒泡到父元素，从而防止任何父处理程序收到该事件的通知。

阻止浏览器执行默认操作。使用isDefaultPrevented方法可以知道是否曾经（在该事件对象上）调用过此方法。

以上是 如何停止复选框上的事件冒泡 的全部内容， 来源链接： utcz.com/qa/413266.html

回到顶部