対象の要素以外をクリックしたときに、対象の要素に変化を加えるイベントの作成方法

特定の要素以外をクリックしたときにイベントを走らせたい。

どんなときに使う？

例えばボップアップボタンが仕掛けられいていた時やヘッダーのメガメニューが開いている時などによく使うことでしょう。
かく言うこのサイトのヘッダーもこの仕様が実装されています。
グローバルナビゲーションをクリックするとメガメニューが開きますが、閉じるUIはありません。
しかし、ページのどの部分でも構わないのでクリックすると自動でメニューが閉じました。
こういったように不特定の箇所をクリックした場合でも動作するUIは意外と自然なのです。
ですので、そういった場合の実装に困らないように以下のコードをご紹介します。

jQueryを使って実装する。

以下のコードはjQueryを使用した場合の書き方です。
jQueryは今でもバージョンアップがリリースされていてjavaScriptを簡単に書くことができるので、初心者にはおすすめのライブラリです。
書いてあることは至って簡単です。詳細はjsのコントアウトに記載しているのでみてみてください。

// 起点となる対象を変数化
const $target = $('.target');
// ノードの全ての要素を対象にクリックイベントを設定
$(document).click((event)=>{
// 引数にEventプロパティの.targetを使用する。
// イベント発火した要素を特定できる。
console.log(event.target);
// event.targetをjQueryオブジェクト化する。
// element.closest()メソッドを使用してelementから引数に該当する直近の要素を取得する。
// if文にはイベント発火した要素と起点となる要素が同一の場合の論理否定を記述。
// jQueryオブジェクトは該当する要素がない場合でも空のオブジェクトが返されるため.lenghtプロパティを使用する。
if(!$(event.target).closest($target).length){
	// 起点となる要素以外をクリックしたときの処理
	$('.wrapper').toggleClass('is_clicked');
	console.log('外側がクリックされました。');
}else {
	// 起点となる要素をクリックしたときの処理
	$target.toggleClass('is_clicked');
	console.log('内側がクリックされました。');
}
});

javaScriptだけで実装する。

ただ案件次第ではjQueryを使えないものもあります。
jQueryなしではコードが書けない！なんてならないように日々ネイティブjsの勉強はして置いた方が良さそうですね。
今回の実装はjQueryでもネイティブでもあまり変わったことはしていません。jQueryオブジェクトを挟んでいるかどうかの違いですね。

const target = document.getElementById('target');
const wrapper = document.getElementById('wrapper');
// ノードの全ての要素を対象にクリックイベントを設定
document.addEventListener('click', (event) => {
// 引数にEventプロパティの.targetを使用する。
// イベント発火した要素を特定できる。
console.log(event.target);
if(!event.target.closest('.target')) {
	wrapper.classList.toggle('is_clicked');
	console.log('外側がクリックされました。');
} else {
	//ここに内側をクリックしたときの処理
	target.classList.toggle('is_clicked');
	console.log('内側がクリックされました。');
}
})

さいごに

いかがでしたか？割とよく使う実装だと思いますので、ぜひブックマークして使い回してみてください。
これで30分仕事が早く終わりますね！

GO BACK