1. ホーム
  2. javascript

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
  }
});

内部にネストしたリストを持つ例としては ここで .