要素の外側のクリックを検出するにはどうすればよいですか?
P粉113938880
P粉113938880 2023-08-23 13:37:35
0
2
483
<p>ユーザーがこれらのメニューのヘッダーをクリックすると完全に表示される HTML メニューがいくつかあります。ユーザーがメニュー領域の外側をクリックしたときにこれらの要素を非表示にしたいと考えています。 </p> <p>jQueryを使用すると可能ですか? </p> <pre class="brush:php;toolbar:false;">$("#menuscontainer").clickOutsideThisElement(function() { // メニューを非表示にする });</pre> <p><br /></p>
P粉113938880
P粉113938880

全員に返信(2)
P粉212114661

documentclick イベントをリッスンし、次を使用して #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

:

リーリー

いいねを押す +0
P粉333186285

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

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート