特定要素以外をクリックしたときにイベントを発生させる方法(改)

以前特定要素以外をクリックしたときにイベントを発生させる方法という記事で、特定要素を除く画面のどこかをクリックしたときにイベントを発生させるスクリプトを作成した記事を上げましたが、Javascriptのイベント系のリファレンスを見ていたら、もっと簡単に出来ることが判明したため、メモを残しておきます。

ちなみにこの方法は、IE9以降に対応しているため、かなり前から存在する手法だったりします…。前述の記事が恥ずかしく感じますが、忘れないためにも残しておきます。

コード

//方法1
outerNode.addEventListener("click", console.log);
innerNode.addEventListener("click", e => e.stopPropagation());

方法1ではinnerNodeでclickイベントが発生した場合、outerNodeでのclickイベントは発生されなくなります(innerNodeのイベントのみ実行される)。ただ、この場合は必ずouterNodeの中にinnerNodeが入っているようにする必要があります。

//方法2
outerNode.addEventListener("click", e => e.target === outerNode ? console.log(e) : null);

方法2ではouterNodeで発生したclickイベントのうちouterNodeから直接発生したイベントの場合のみ実行されます。この場合も必ずouterNodeの中にinnerNodeが入っているようにする必要があります。

おまけ

このまま記事を終わらせるのは、なんかアレなのでHTML5.2の仕様を利用してモーダルウィンドウを表示するコードでも載せておきます。詳細は以下のリンクをご覧ください。

W3: HTML5.2 Changes

サンプル

※現在の対応ブラウザはChromium系(Google Chrome、Vivaldiなど)のみです。

コード

<a href="#" id="showDialog">Show Modal Dialog</a>
<dialog id="sample">Test</dialog>

let dialog = document.getElementById("sample");
document.getElementById("showDialog").addEventListener("click", e =>{
	e.preventDefault();
	dialog.showModal();
});
dialog.addEventListener("click", e => dialog.close());

上記の例ではダイアログの中身を含むどこをクリックしても閉じます。dialog要素は単体で使うのではなく、中にHTMLコードを入れて使うことを想定されているため、背景をクリックしたときだけイベントを発生させるには、前述のInner/Outer構造にしてtarget、path、stopPropagation()などを使って実装するようです。