Javascript 如何在复选框单击时停止事件冒泡
我有一个复选框,我想对单击事件执行一些Ajax操作,但是该复选框也在一个容器中,具有自己的单击行为,我不想在单击该复选框时运行它。此示例说明了我要执行的操作:Javascript 如何在复选框单击时停止事件冒泡,javascript,jquery,checkbox,events,Javascript,Jquery,Checkbox,Events,我有一个复选框,我想对单击事件执行一些Ajax操作,但是该复选框也在一个容器中,具有自己的单击行为,我不想在单击该复选框时运行它。此示例说明了我要执行的操作: $(文档).ready(函数(){ $('容器').addClass('隐藏'); $('#标题')。单击(函数(){ if($('#container').hasClass('hidden')){ $(“#容器”).removeClass('hidden'); }否则{ $('容器').addClass('隐藏'); } }); $(
$(文档).ready(函数(){
$('容器').addClass('隐藏');
$('#标题')。单击(函数(){
if($('#container').hasClass('hidden')){
$(“#容器”).removeClass('hidden');
}否则{
$('容器').addClass('隐藏');
}
});
$(“#标题输入[类型=复选框]”)。单击(函数(事件){
//做点什么
});
});代码>
#container.hidden#body{
显示:无;
}
标题
一些内容
使用停止播放法:
event.stopPropagation();
替换
event.preventDefault();
return false;
与
事件。停止播放()
停止将事件冒泡到
父元素,阻止任何父元素
处理程序不会被通知
事件
event.preventDefault()
阻止浏览器执行
默认操作。使用该方法
我想知道
这个方法曾经被调用过
事件对象)
正如其他人提到的,请尝试stopPropagation()
还有第二个处理程序要尝试:event.cancelBubble=true代码>它是IE特定的处理程序,但至少在FF中受支持。我对它不太了解,因为我自己也没用过,但如果其他方法都失败的话,也许值得一试。别忘了IE:
if (event.stopPropagation) { // standard
event.stopPropagation();
} else { // IE6-8
event.cancelBubble = true;
}
这是理解事件冒泡概念的一个很好的例子。根据以上答案,最终代码如下所述。当用户单击复选框时,将使用event.stopPropagation()停止向其父元素“header”的事件传播代码>
$(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时,不需要单独调用stop函数
您只需在事件处理程序中返回false
这将停止事件并取消冒泡
也看到
从jQuery文档中:
因此,这些处理程序可以通过调用event.stopPropagation()
或返回false
来防止委托处理程序触发
该代码归功于。我只是创建了一个片段来演示它,因为我认为这会很感激,我想找个借口来尝试这个功能
$(文档).ready(函数(){
$('容器').addClass('隐藏');
$('#标题')。单击(函数(){
if($('#container').hasClass('hidden')){
$(“#容器”).removeClass('hidden');
}否则{
$('容器').addClass('隐藏');
}
});
$(“#标题输入[类型=复选框]”)。单击(函数(事件){
if(event.stopPropagation){//标准
event.stopPropagation();
}else{//IE6-8
event.cancelBubble=true;
}
});
});代码>
div{
文本对齐:居中;
填料:2米;
字体大小:1.2em
}
.隐藏{
显示:无;
}
复选框不会使事件冒泡,但此文本将冒泡。
click()冒泡了代码>在angularjs中,这应该有效:
event.preventDefault();
event.stopPropagation();
以下是一个对我有效的技巧:
handleClick = e => {
if (e.target === e.currentTarget) {
// do something
} else {
// do something else
}
}
说明:我将handleClick
附加到模式窗口的背景上,但它也会在模式窗口内的每次单击中触发(因为它位于background div中)。因此,我添加了条件(e.target===e.currentTarget)
,该条件仅在单击背景时满足。出于某种原因,这对我不起作用,但返回false did。如果使用.live()
方法绑定事件,则这将不起作用。您必须使用返回false代码>本身。这使用jQuery的.on()
方法工作(live现在不推荐使用)。我不明白为什么return false不起作用。我花了很长时间才弄明白这个事件。preventDefault()在IE8中没有显示复选标记,但在其他浏览器中运行良好。我找到这个答案后,我修复,然后谷歌与默认值,IE8,复选框作为关键字,把我带到这里。没有工作。。但是这两行没有返回false-->event.preventDefault();event.stopPropagation();我发现了一篇关于这个问题的文章,可能对其他堆栈溢出程序有所帮助。这个答案来自2012年。2015年,请不要忘记IE。这同样适用于IE9。我的IE9测试机被stopPropagation()阻塞,但喜欢cancelBubble()。遗憾的是,有些人/组织在2016年仍在使用IE9。我们这些公司客户不能忽视这一点。我喜欢2019年的ie5代码,它实际上展示了如何使用事件变量,谢谢。你能解释一下你的答案吗,它是如何工作的,以便未来的读者能够清楚地了解。
handleClick = e => {
if (e.target === e.currentTarget) {
// do something
} else {
// do something else
}
}