javascript - 。子要素に関係のないクリックアクションを非表示にする

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