将click事件绑定到容器，但从事件逻辑中排除容器中的元素

Question

<div style="width:200px; height:200px; background:blue;">
    <!-- Other markup -->
    <button type="button">Special Button</button>
</div>

(function ($) {
    $("div").click(function () {
        alert('fired');
        // Don't fire when the button is clicking!
    });
}(jQuery));

如何在单击按钮时将代码/ html架构为而不是触发“div”点击绑定？这是一个jsfiddle来玩。

Answer 1

您需要阻止来自按钮的事件传播

$('div button').click(function(event){
    event.stopPropagation()
})

演示：Fiddle