单击 div 上的关闭按钮并触发 div click()答案

【问题标题】：Click close button on a div with triggering div click()单击 div 上的关闭按钮并触发 div click()
【发布时间】：2011-12-05 20:23:23
【问题描述】：

我在 DIV 中有一个关闭按钮，同时 DIV 和关闭按钮也附加了 click() 事件。当我单击关闭按钮时，它还会触发 div click() 事件。我知道我可以在 div 中放置一个 SPAN 并将我的点击事件附加到 span 而不是 DIV，但是有没有办法我可以同时保留 div 点击事件和关闭按钮点击事件而不触发 div click()当我点击关闭按钮时？

<div id="sendFeedback" class="feedback with-round-borders with-padding with-box-shadows">Send us your feedback <span id="closeFeedback" class="ui-icon ui-icon-circle-close" style="float:right"></span></div>
<script>
$(document).ready(function() {
 $("#sendFeedback").click(function() {
   alert('test');
 });
$("#closeFeedback").click(function() {
 $("#sendFeedback").fadeOut();
})
});
</script>

http://jsfiddle.net/t5VPN/1/

【问题讨论】：

这听起来像是点击甚至意外冒泡。如果你使用 jquery 的 $(selector).bind() 方法来附加事件，你可以通过为函数的第三个参数声明一个 false 值来停止冒泡。（即：$(selector).bind('click', function(){}, false)。）

标签： javascript jquery jquery-ui

【解决方案1】：

将event.stopPropagation() 添加到<span> 点击事件处理程序：

$(document).ready(function() {
    $("#sendFeedback").click(function() {
        alert('test');
    });
    $("#closeFeedback").click(function(event) {
        event.stopPropagation();
        $("#sendFeedback").fadeOut();
    })
});

.stopPropagation() 将阻止事件冒泡到 div（或任何其他祖先）：http://api.jquery.com/event.stopPropagation/

这是您更新的 jsfiddle：http://jsfiddle.net/jasper/t5VPN/2/

【讨论】：

+1 正是我想要的。谢谢贾斯珀。 9 分钟后接受答案。
供任何搜索者将来参考：api.jquery.com/event.stopPropagation

【解决方案2】：

是的。您应该在 DOM 树中取消事件的冒泡。

有关更多信息，请参阅 DOM 事件文档中的 Event#stopPropagation()。

【讨论】：

【解决方案3】：

$('#closeFeedback').click(function(e){
     $('#sendFeedback').fadeOut();
     e.stopPropagation();
 });

【讨论】：