从元素的子元素中删除特定的事件处理程序答案

【问题标题】：Remove specific event handler from child of element从元素的子元素中删除特定的事件处理程序
【发布时间】：2015-10-16 14:17:46
【问题描述】：

在我的应用程序中，我想在用户单击面板标题时调整窗口大小，但该标题包含一个子元素按钮，该按钮绑定了另一个事件处理程序。我需要做的是，当用户单击该按钮时，不会调用调整大小功能。我尝试了很多变体，但都没有奏效。

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，但单击的元素仍然是 panel-heading

有什么建议吗？

【问题讨论】：

请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”！

标签： javascript jquery events

【解决方案1】：

在子节点上绑定一个点击事件，并使用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>

【讨论】：