从元素的子元素中删除特定的事件处理程序
Remove specific event handler from child of element
在我的应用程序中,我想在用户单击panel-heading时调整窗口的大小,但是该标题包含一个子元素- button,该子元素- button绑定了另一个事件处理程序。我需要做的是,当用户点击那个按钮时,不会调用任何大小调整函数。我试了许多不同的方法,但没有一个奏效。
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,但点击的元素仍然是面板标题
有什么建议吗?
在子事件上绑定单击事件,并使用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>
相关文章:
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 如何在元素中处理鼠标事件,但不能在其子元素上处理
- 如何使用角度事件处理程序引用输入元素的值
- Meteor - 从另一个模板事件处理程序访问 DOM 元素
- 在动态创建的元素中包含参数的事件处理程序
- 测试 JavaScript Zombie 事件处理程序或 DOM 元素
- 有没有办法用Javascript找到元素的事件处理程序
- 用于逐步增强的“select”元素的JavaScript中的事件处理程序
- Javascript:为元素设置适当的事件处理程序
- jQuery点击事件处理类元素和内部元素
- 我在jQuery事件处理和隐藏/显示图像元素方面做错了什么
- 如何为将通过AJAX加载的元素声明事件处理程序
- 元素事件处理程序到EXT.js面板中
- 如何在更改的事件处理程序中忽略Polymer元素上默认属性的初始覆盖
- AngularJS:如何从指令添加的元素中删除事件处理程序
- 将事件处理程序分配给元素集合
- 通过使用不同的选择器选择元素,为元素提供多个事件处理程序
- Jquery为多个元素和事件查询一个事件处理程序
- 显示绑定到动态生成的元素的所有事件处理程序
- jquery.data 在存储元素时是否跳过事件处理程序