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で使用するにはポリフィルを読み込んでください。

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

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