特定の要素をクリックしたかどうかを判定する処理を作成したいと思います。

実現したいこと

以下のように、特定の要素をクリックすると要素の色が変わり、それ以外をクリックすると色が戻るようなイメージです。

実装

HTML

<div id='test' class="sample"></div>

CSS

.sample {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.red {
  background-color: red;
}

java script

// 特定の要素がクリックされたら要素の色を変えるイベントの設定
const test = document.getElementById('test');
test.addEventListener('click', function (e) {
  test.classList.add('red');
});

// 特定の要素以外をクリックしたかどうかの判定を行い、
// 特定の要素以外がクリックされたら、要素の色を元に戻す
document.addEventListener('click', function (e) {  
  if(!e.target.closest('#test')){
    const test = document.getElementById('test');
    test.classList.remove('red');
  }
});

特定の要素がクリックされたどうかをclosestメソッドを使用して判断しています。

closestメソッドは、指定したセレクタに一致する最も近い自分自身を含む祖先要素を返します。
これにより、自信もしくは自信以下の要素をクリックしない限り、自信以外の要素がクリックされたと判断出来ます。

最後に

応用してモーダル画面が表示された時、モーダル画面以外をクリックするとモーダル画面が閉じるような動きを作成する時に役に立つかもしれません。