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

Question

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

Answer 1

替换

event.preventDefault();
return false;

与

event.stopPropagation();

event.stopPropagation()

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

event.preventDefault()

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

Answer 2

使用 stopPropagation 方法：

event.stopPropagation();

Answer 3

别忘了 IE：

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

Answer 4

正如其他人提到的，试试stopPropagation()。

还有第二个处理程序可以尝试：event.cancelBubble = true; 这是一个特定于 IE 的处理程序，但至少 FF 支持它。不太了解它，因为我自己没有使用过它，但如果一切都失败了，它可能值得一试。

Answer 5

使用 jQuery 时，您不需要单独调用停止函数。

您可以在事件处理程序中返回false

这将停止事件并取消冒泡..

另见event.preventDefault() vs. return false

来自 jQuery 文档：

因此，这些处理程序可能会阻止委托处理程序通过调用event.stopPropagation() 或返回false 来触发。

Answer 6

这是理解事件冒泡概念的绝佳示例。根据以上答案，最终代码将如下所述。如果用户单击复选框，将使用event.stopPropagation(); 停止向其父元素“标题”的事件传播。

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

Answer 7

感谢@mehras 获取代码。我刚刚创建了一个 sn-p 来演示它，因为我认为这会受到赞赏，并且我想要一个尝试该功能的借口。

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

div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"><input type="checkbox" />Checkbox won't bubble the event, but this text will.</div>
<div id="container">click() bubbled up!</div>

Answer 8

这是一个对我有用的技巧：

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

说明：我将handleClick 附加到模态窗口的背景上，但它也会在模态窗口内的每次单击时触发（因为它位于背景 div 中）。所以我添加了条件(e.target === e.currentTarget)，只有在点击背景时才会满足。

Answer 9

在 angularjs 中这应该可以工作：

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