如何停止事件冒泡复选框点击

我有一个复选框，我想在单击事件上执行一些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;
198709 次浏览
小开

使用stopPropagation方法:

event.stopPropagation();
小开
最佳答案

取代

event.preventDefault();
return false;

与

event.stopPropagation();

< em > event.stopPropagation () < / em >

停止事件到的冒泡 父元素，阻止任何父元素 处理程序不被通知 事件。< / p >

< em > event.preventDefault () < / em >

阻止浏览器执行 默认动作。使用方法 isdefaultprevent来知道是否 此方法曾经被调用(在此 事件对象)。< / p >

小开

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

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

小开

别忘了IE:

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

这是理解事件冒泡概念的一个极好的示例。基于上面的答案，最终的代码如下所示。当用户单击复选框时，事件传播到其父元素“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;
}
});
});
小开

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

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

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

也可参见event.preventDefault() vs. return false

jQuery文档:

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

小开

代码归到@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>

小开

在angularjs中，这应该是有效的:

event.preventDefault();
event.stopPropagation();
小开

这里有一个对我有用的技巧:

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

解释:我将handleClick附加到一个模态窗口的背景，但它也会在模态窗口内的每次点击时触发(因为它在背景div中)。因此，我添加了条件(e.target === e.currentTarget)，它只在单击背景时才会满足。


提交答案