JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】

JavaScriptで特定の要素以外をクリックした時のイベント

デモ

ボタンとボタン以外をクリックしてみてください。

HTML

以下のHTMLを例にJavaScriptを紹介します。

<button class="c-button">
  click!!
</button>

JavaScript

以下のJavaScriptをコピペで使用できます。
.c-buttonの箇所を書き換えて使用してください。

document.addEventListener('click', (e) => {
  if(!e.target.closest('.c-button')) {
    //ここに外側をクリックしたときの処理
  } else {
    //ここに内側をクリックしたときの処理
  }
})

解説

イベントオブジェクトのtargetを使用しイベントが発生した要素の親要素に.c-buttonがなければ外側と判定します。

closestメソッドを使用しているのでIEで使用するにはポリフィルを読み込んでください。

JavaScriptのclosestメソッドをIEに対応させるポリフィル

JavaScriptのclosestメソッドは最も近い先祖の要素を取得するために使用する非常に便利なメソッドですがIEには対応していません。しかしIEに対応するポリフィルが公開されていますのでご紹介します。

参考にさせていただいた記事

jQueryで特定要素以外クリック時のイベントを取得する

React版はこちら

【React】特定の要素の外側をクリックしたときのイベントの設定方法

モーダルやポップアップなどで外側をクリックしたときに閉じる実装をしたいと思ったことはないでしょうか？今回はそんなときに使える特定の要素の外側をクリックしたときのイベントの設定方法を紹介します。