1. ホーム
  2. javascript

[解決済み] 要素外クリックの検出 (vanilla JavaScript)

2022-11-25 14:10:21

質問

良い解決策をあちこちで探しましたが、以下のようなものが見つかりませんでした。 jQueryを使用しない .

クロスブラウザで、(変なハックや壊れやすいコードなしで)要素の外側のクリックを検出する通常の方法はありますか(子要素を持つことも持たないこともあります)?

どのように解決するのですか?

イベントリスナーを document に追加し Node.contains() を使って、イベントのターゲット(一番内側のクリックされた要素)が、指定した要素の中にあるかどうかを調べます。IE5でも動作します。

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);

  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  if (isClickInside) {
    alert('You clicked inside A')
  } else {
    alert('You clicked outside A')
  }
});
div {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, .2);
  text-align: center;
}
Is the click inside A or outside?
<div id="a">A
  <div id="b">B
    <div id="c">C</div>
  </div>
</div>