javascript - .hide 任何与子元素无关的点击动作

Question

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

当它被点击时我#example想要它，但当它的子元素被点击时.hide我不希望它。.hide

Answer 1

添加一个处理程序<div>，然后检查它是否是目标。

在这个例子中，event.target是实际被点击this的元素，但是是附加了处理程序的元素。

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