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

JavaScriptのclosestメソッドは最も近い先祖の要素を取得するために使用する非常に便利なメソッドですがIEには対応していません。

しかし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