要素の外側のクリックを検出するにはどうすればよいですか?
P粉113938880
2023-08-23 13:37:35
<p>ユーザーがこれらのメニューのヘッダーをクリックすると完全に表示される HTML メニューがいくつかあります。ユーザーがメニュー領域の外側をクリックしたときにこれらの要素を非表示にしたいと考えています。 </p>
<p>jQueryを使用すると可能ですか? </p>
<pre class="brush:php;toolbar:false;">$("#menuscontainer").clickOutsideThisElement(function() {
// メニューを非表示にする
});</pre>
<p><br /></p>
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
:リーリー
閉じたウィンドウのドキュメント本文にクリック イベントを添付します。別のクリック イベントをコンテナにアタッチして、ドキュメント本文への伝播を停止します。
リーリー