要素の外側のクリックを検出するにはどうすればよいですか?

Question

ユーザーがこれらのメニューのヘッダーをクリックすると完全に表示される HTML メニューがいくつかあります。ユーザーがメニュー領域の外側をクリックしたときにこれらの要素を非表示にしたいと考えています。

jQueryを使用すると可能ですか?

$("#menuscontainer").clickOutsideThisElement(function() {
    // メニューを非表示にする
});

Answer 1

document で click イベントをリッスンし、次を使用して #menucontainer がクリックされた要素の祖先またはターゲットではないことを確認できます。 .closest()。

そうでない場合、クリックされた要素は #menucontainer の外側にあるため、安全に非表示にすることができます。

リーリー

編集 – 2017年6月23日

メニューを閉じてイベントのリッスンを停止する場合は、イベント リスナーの後でクリーンアップすることもできます。この関数は新しく作成されたリスナーのみをクリーンアップし、他のクリック リスナーは document に残します。 ES2015 構文を使用します:

リーリー

編集 – 2018年11月3日

jQueryを使いたくない人向け。これは上記のプレーンな vanillaJS (ECMAScript6) コードです。

リーリー ＃＃＃＃＃＃知らせ：＃＃＃ これは Alex のコメントに基づいています。jQuery 部分の代わりに

!element.contains(event.target) を使用するだけです。 ただし、element.closest()

はすべての主要なブラウザでも動作するようになりました (W3C バージョンは jQuery バージョンとは若干異なります)。 ポリフィルはここにあります:

Element.closest() 編集 – 2020-05-21

ユーザーが要素内をクリックしてドラッグし、要素を閉じずに要素の外でマウスを放せるようにしたい場合:

リーリー

内

outsideClickListener

:

リーリー

Answer 2

閉じたウィンドウのドキュメント本文にクリック イベントを添付します。別のクリック イベントをコンテナにアタッチして、ドキュメント本文への伝播を停止します。

リーリー