如何在复选框单击时停止事件冒泡 [英] How to stop event bubbling on checkbox click

问题描述

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

$(document).ready(function() {$('#container').addClass('隐藏');$('#header').click(function() {if ($('#container').hasClass('hidden')) {$('#container').removeClass('隐藏');} 别的 {$('#container').addClass('隐藏');}});$('#header input[type=checkbox]').click(function(event) {//做一点事});});

#container.hidden #body {显示:无；}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><div id="容器"><div id="标题"><h1>标题</h1><input type="checkbox" name="test"/>

<div id="body"><p>一些内容</p>

但是，我无法弄清楚如何在不导致默认点击行为(复选框变为选中/取消选中)不运行的情况下停止事件冒泡.

以下两种情况都会停止事件冒泡，但也不会更改复选框状态:

event.preventDefault();返回假；

解决方案

replace

event.preventDefault();返回假；

与

event.stopPropagation();

event.stopPropagation()

<块引用>

停止事件冒泡到父元素，防止任何父元素处理程序从被通知活动.

event.preventDefault()

<块引用>

阻止浏览器执行默认操作.使用方法isDefaultPrevented 知道是否这个方法曾经被调用过(在那事件对象).

I have a checkbox that I want to perform some Ajax action on the click event, however the checkbox is also inside a container with it's own click behaviour that I don't want to run when the checkbox is clicked. This sample illustrates what I want to do:

$(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>

However, I can't figure out how to stop the event bubbling without causing the default click behaviour (checkbox becoming checked/unchecked) to not run.

Both of the following stop the event bubbling but also don't change the checkbox state:

event.preventDefault();
return false;

解决方案

replace

event.preventDefault();
return false;

with

event.stopPropagation();

event.stopPropagation()

Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

event.preventDefault()

Prevents the browser from executing the default action. Use the method isDefaultPrevented to know whether this method was ever called (on that event object).

这篇关于如何在复选框单击时停止事件冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！