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

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() 与 return false

来自 jQuery 文档：

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

Answer 6

这是理解事件冒泡概念的一个很好的例子。 根据上述答案，最终代码将如下所示。 当用户单击复选框时，将使用event.stopPropagation();停止向其父元素“header”的事件传播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的代码。 我刚刚创建了一个片段来演示它，因为我认为这会受到赞赏并且我想要一个尝试该功能的借口。

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