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

Question

我有一个复选框,我想对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;
}

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

这是理解事件冒泡概念的一个很好的例子.根据以上答案,最终代码将如下所述.在用户单击复选框的情况下,将使用停止事件传播到其父元素"标题" 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 6

使用jQuery时,您不需要单独调用stop函数.

你可以只false在事件处理程序中

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

另见:

event.preventDefault()与return false

来自jQuery文档:

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