JavaScriptのclosestメソッドをIEに対応させるポリフィル

JavaScriptのclosestメソッドをIEに対応させるポリフィル

以下をコピペして読み込んでください。
それだけでIEでclosestが使用可能になります。

参考：https://developer.mozilla.org/ja/docs/Web/API/Element/closest#Polyfill

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 (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

読み込み方法

先程のコードをclosest.jsというファイルを作成保存したとします。
説明することでもありませんが読み込み方法を2つ記載します。

スクリプトタグ

普通スクリプトタグで読み込む方法です。

<script src="/path/to/closest.js"></script>

webpack

webpack.config.jsのエントリーポイントに追加

entry: ['./path/to/closest.js', './src/js/app.js']

以上で終わりです。

コピペして読み込むだけなので特に説明することはほぼありませんが、これだけでIEに対応できます。

参考サイト

https://developer.mozilla.org/ja/docs/Web/API/Element/closest#Polyfill