【JavasScript】モーダルでの枠外をクリックしたら発火させる方法

はる

今回は、JavaScriptのよくある『モーダル(ポップアップ表現)を閉じる』時に外枠をクリックしたら閉じる判定方法を紹介します。

モーダル(ポップアップ)作成時の外側をクリックするときの判定を紹介
注意はIE11は非対応の方法 (ポリフィルで対応可能)
モダンな記述なので超シンプル

IE11非対応となっていますが、ポリフィルで対応可能です。
かなりシンプルになってるので要チェックです。

モーダルで便利な外側をクリックしたら発火させるJavaScript例
1. 解説
2. IE11対応方法
まとめ

モーダルで便利な外側をクリックしたら発火させるJavaScript例

See the Pen モーダルでの枠外をクリックしたら発火させる【IE11非対応】 by blanket11 (@blanket11hal) on CodePen.

解説

let modal = document.getElementById('js-modal');

modal.addEventListener('click', (event) => {
  if(event.target.closest('#js-modal-content') === null) {
    alert('外側をクリックされました。');
  }
});

closest() メソッドを使うことでかなりシンプルに記述しています。
closest() メソッドの引数に、セレクタを指定できますので、クリックしても反応してほしくない部分を指定します。

この記述の場合、 closest() メソッドで指定したセレクタより親の要素の場合 null を返してくれます。
このnullを返してくれたのを条件分岐で判定し外側をクリックしたことを判定できます。

かなりシンプルですが、残念なのが、closest()メソッドはie11が非対応なので対応ブラウザに注意してください。

参考リンク: Element.closest() – Web API | MDN

IE11対応方法

ポリフィル対応で使える様にできます。
ビルド環境に、自動でポリフィル対応できる様にしたり、手動でポリフィル対応も可能です。

もし、ポリフィルを自動で対応するビルド環境がない場合、Element.closest() – Web API | MDN で紹介されていますが、下記の様に記述しておけばIE11対応が可能です。

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector ||
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

参考リンク： Element.closest() – Web API | MDN