.hide任何与子元素无关的点击操作

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();
    }
});