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;
}

<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;

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

这是理解事件冒泡概念的一个很好的例子。根据以上答案，最终代码将如下所述。在用户单击复选框的情况下，事件传播到其父元素＆＃39;标题＆＃39;将使用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() vs. return false

来自jQuery文档：

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

Answer 7

感谢@mehras代码。我刚刚创建了一个片段来演示它，因为我认为这将是值得赞赏的，我想借口尝试这个功能。

＆＃13;

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

＆＃13;

div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 8

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

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

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

Answer 9

在angularjs中，这应该有效：

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

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

9 个答案: