javascriptでdivの外側のクリックを検出する
2023-08-12 23:15:31
質問
div領域の内側または外側でのクリックを検出したい。厄介なのは、divには他の要素が含まれ、div内の要素の1つがクリックされた場合、それは内部クリックとみなされるべきで、同じようにdivの外から要素がクリックされた場合、それは外部クリックとみなされるべきであるということです。
私はたくさん研究してきましたが、私が見つけることができたすべてはjqueryの例であり、私は純粋なjavascriptを必要としています。
どんな提案も感謝されるでしょう。
どのように解決するのですか?
個々のユースケースによりますが、この例ではメインの div の中に他の div やリストなどの要素がネストされている可能性が高いようです。 使用方法 ノードに含まれる を使用すると、ターゲット要素がチェックされる div の中にあるかどうかを確認するのに便利です。
window.addEventListener('click', function(e){
if (document.getElementById('clickbox').contains(e.target)){
// Clicked in box
} else{
// Clicked outside the box
}
});
内部にネストしたリストを持つ例としては ここで .
関連
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] Reactコンポーネント外でのクリックを検出する
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?