javascript - .隐藏与子元素无关的任何点击操作

Question

<div id="example" style="background:yellow;height:200px;width:200px;">
 <button>Some text</button>
</div>​

我希望 #example 在单击时 .hide ，但我不希望它在其子元素获取时 .hide点击。

Answer 1

将处理程序添加到 <div>然后检查它是否是目标。

在 this example ，event.target是实际被单击的元素，但是 this是附加有处理程序的元素。

$('#example').on('click', function(event) {
    if (event.target === this) {
        alert('div, not button');
        $(this).hide();
    }
});