[Javascript] 要素の外側をクリックした時にremoveする

概要

例えばモーダルウインドウには×で閉じるボタンがレイアウトされている事が一般的ですが、
ユーザビリティを考えると、ボタン以外でも閉じられるようにしている事が望ましいですよね。
だからといって、どこでもクリックすれば閉じられるような処理では、
そもそも閉じるボタンの意味がなくなってしまいます。

今回はクリックイベントで付与したクラスを、
反応させたくない要素の外側かを判定して取り除く処理になります。
あくまで私が調べた結果ですので、もっとスマートな書き方があるかもしれません。

制御部分のコード

Javascript

const docOpen = document.getElementById('クラスを付与した要素');
const elemBody = document.querySelector('body');

elemBody.addEventListener('click', e => {
  if(e.target !== docOpen) {
    docOpen.classList.remove('active');
  }
});

解説

elemBody.addEventListener('click', e => {
  if(e.target !== docOpen) {
     docOpen.classList.remove('active');
  }
});

今回は全体の指定をbodyにしています。
body要素をクリックした時に、
event.targetプロパティでクリックした要素を取得し、
開いているdocOpenの要素と違う要素なのかを判定しております。

こうする事で、例えば、ドロワーメニュー等を開いた時に、
メニュー部分までクリックしたら閉じてしまうといった動作を防いでいます。

要素が違うのならばremoveされます。