在我的应用程序中,我想在用户单击面板标题时调整窗口大小,但该标题包含一个子元素按钮,该按钮绑定(bind)了另一个事件处理程序。我需要做的是,当用户单击该按钮时,不会调用调整大小函数。我尝试了很多变体,但没有一个起作用。
HTML:
<div class="panel-heading" style="cursor:pointer">
<div class="pull-right">
<button type="button" class="btn btn-danger btn-xs" id="btn-subject-remove"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</div>
我的 jq 是:
$('#btn-subject-remove').on('click',btnRemoveSubjectsClick);
$('#subscribers-row .panel-heading').on('click',btnResizeClick);
我已经尝试过,但没有一个起作用:
$('#subscribers-row .panel-heading').off('click','#btn-subject-remove',btnResizeClick);
$('#btn-subject-remove').off('click',btnResizeClick);
$('#subscribers-row .panel-heading').on('click',btnResizeClick).children().click(function(e){return false});
我还尝试在 btnResizeClick 函数中检查单击了哪个元素,如果是删除按钮则返回 false,但单击的元素仍然面板标题
有什么建议吗?
最佳答案
在子级上绑定(bind)点击事件,并使用e.stopPropagation()
来阻止父级点击事件。
举个简单的例子:
$(function() {
$('div').on('click', function() {
$(this).toggleClass('redBg');
});
$('div>*').on('click', function(e) {
e.stopPropagation();
});
});
div {
background: green;
width: 200px;
height: 200px;
}
span {
display: block;
height: 50px;
background: yellow;
}
.redBg {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
With some text
<span> in a span </span>
</div>
关于javascript - 从元素的子元素中删除特定的事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33172726/