javascript - ページ上の他の場所（要素の外側）をクリックすると要素を非表示にします

Question

Web ページのポップアップ メニューに取り組んでいます。現在、メニューを正常に表示できます。私がやりたいのは、メニューの外側をクリックしたときにメニューを非表示にすることです。これを行う 1 つの方法は、クリック イベントをドキュメントにバインドすることです。

$(document).on('click', function(event) {
    // here I can hide the menu
});

しかし、クリック イベントをドキュメントにバインドするのは見栄えが悪く、コードの保守が困難になるため、そのようにはしたくありません。

大変感謝します。：）

Answer 1

次のようにポップアップ メニューをラップできます。

<div class="overlay">
    <div class="popup">...</div>
<div>

その後

$(".overlay").click(function(){
    // hide your popup
})

オーバーレイの位置を固定にすると良いでしょう