84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
ユーザーがこれらのメニューのヘッダーをクリックすると完全に表示される HTML メニューがいくつかあります。ユーザーがメニュー領域の外側をクリックしたときにこれらの要素を非表示にしたいと考えています。
jQueryを使用すると可能ですか?
$("#menuscontainer").clickOutsideThisElement(function() { // メニューを非表示にする });
documentでclickイベントをリッスンし、次を使用して#menucontainerがクリックされた要素の祖先またはターゲットではないことを確認できます。.closest()。
document
#menucontainer
.closest()
そうでない場合、クリックされた要素は#menucontainerの外側にあるため、安全に非表示にすることができます。
メニューを閉じてイベントのリッスンを停止する場合は、イベント リスナーの後でクリーンアップすることもできます。この関数は新しく作成されたリスナーのみをクリーンアップし、他のクリック リスナーはdocumentに残します。 ES2015 構文を使用します:
jQueryを使いたくない人向け。これは上記のプレーンな vanillaJS (ECMAScript6) コードです。
!element.contains(event.target)を使用するだけです。ただし、element.closest()
ただし、
Element.closest()編集 – 2020-05-21
outsideClickListener
リーリー
閉じたウィンドウのドキュメント本文にクリック イベントを添付します。別のクリック イベントをコンテナにアタッチして、ドキュメント本文への伝播を停止します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
documentでclickイベントをリッスンし、次を使用して#menucontainerがクリックされた要素の祖先またはターゲットではないことを確認できます。.closest()。そうでない場合、クリックされた要素は
リーリー#menucontainerの外側にあるため、安全に非表示にすることができます。編集 – 2017年6月23日
メニューを閉じてイベントのリッスンを停止する場合は、イベント リスナーの後でクリーンアップすることもできます。この関数は新しく作成されたリスナーのみをクリーンアップし、他のクリック リスナーは
リーリーdocumentに残します。 ES2015 構文を使用します:編集 – 2018年11月3日
jQueryを使いたくない人向け。これは上記のプレーンな vanillaJS (ECMAScript6) コードです。
リーリー ＃＃＃＃＃＃知らせ：＃＃＃ これは Alex のコメントに基づいています。jQuery 部分の代わりに!element.contains(event.target)を使用するだけです。
はすべての主要なブラウザでも動作するようになりました (W3C バージョンは jQuery バージョンとは若干異なります)。 ポリフィルはここにあります:ただし、element.closest()Element.closest()
ユーザーが要素内をクリックしてドラッグし、要素を閉じずに要素の外でマウスを放せるようにしたい場合:編集 – 2020-05-21リーリー
内outsideClickListener
:リーリー
閉じたウィンドウのドキュメント本文にクリック イベントを添付します。別のクリック イベントをコンテナにアタッチして、ドキュメント本文への伝播を停止します。
リーリー