Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Метод closest не срабатывает на IE 10,11 (?) (https://javascript.ru/forum/misc/75857-metod-closest-ne-srabatyvaet-na-ie-10-11-a.html)

yaparoff 12.11.2018 16:33

Метод closest не срабатывает на IE 10,11 (?)
 
Не срабатывает метод closest на IE 11
_removeImage(e) {
    const imageItem = e.target.closest('.add-images__item');
    this.imagesRow.removeChild(imageItem);
    if(!this.imagesRow.querySelector('.add-images__item')) {
      this.imagesRow.classList.add('visually-hidden');
    }
  }


В IE11, который установлен у меня на рабочей машине (Windows 10) приведенный выше код работает корректно.
Когда тестируешь на browserstack, выбираешь Windows 10 -> IE 11
то приведенный ниже код не работает. Указывает что const imageItem = null

Вот и думаю что за ерунда и как это исправить.
Нашел вот такой код-полифил
(function(ELEMENT) {
    ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
    ELEMENT.closest = ELEMENT.closest || function closest(selector) {
        if (!this) return null;
        if (this.matches(selector)) return this;
        if (!this.parentElement) {return null}
        else return this.parentElement.closest(selector)
      };
}(Element.prototype));


и еще вот

(function(e){ 
 e.closest = e.closest || function(css){ 
   var node = this;
  
   while (node) { 
      if (node.matches(css)) return node; 
      else node = node.parentElement; 
   } 
   return null; 
 } 
})(Element.prototype)



Но как их сюда подставить? У меня просто проект большой, все в ООП. Этих closest там много и что мне каждый раз прописывать этот фикс в месте где closest встречается? Меня еще смущает то, что это IIFE-функция и куда ее прописывать?

до этого просто не использовал такие полифиллы. Надеюсь на помощь

рони 12.11.2018 16:44

yaparoff,
добавить один раз на страницу в начале
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>

j0hnik 12.11.2018 18:59

или вот этот код в начало скрипта.
(function(ELEMENT) {
	ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
	ELEMENT.closest = ELEMENT.closest || function closest(selector) {
		if (!this) return null;
		if (this.matches(selector)) return this;
		if (!this.parentElement) {return null}
			else return this.parentElement.closest(selector)
		};
}(Element.prototype));

j0hnik 12.11.2018 19:01

рони,
у вас там много всего

рони 12.11.2018 19:41

j0hnik,
там ничего или будет только closest и только в ie

j0hnik 12.11.2018 20:37

рони, файл то откывали?
<div></div>
	<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
	<script>
var span = document.createElement('span');
document.querySelector("div").replaceWith(span);
	</script>


в ie запустите

рони 12.11.2018 20:55

j0hnik,
протестируйте с этими параметрами
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.closest"></script>



https://cdn.polyfill.io/v2/docs/examples

yaparoff 13.11.2018 08:26

рони, j0hnik, спасибо, все решилось
Создал отдельный файл, в котором написан полифил для closest

(function(e){
  e.closest = e.closest || function(css){
    var node = this;

    while (node) {
      if (node.matches(css)) return node;
      else node = node.parentElement;
    }
    return null;
  }
})(Element.prototype);

и полифил для matches
if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
      return i > -1;
    };
}

j0hnik 13.11.2018 08:33

рони,
Этот норм

рони 13.11.2018 08:40

yaparoff,
преимущество сервиса cdn.polyfill.io в том что он самостоятельно определяет что грузить надо или нет необходимости, в вашем случае для firefox например, код будет лишним.

yaparoff 13.11.2018 09:56

рони,
понял. поставил скрипт
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

перед всем скриптами.
А тот файл с полифиллом удалил
Работает. Спасибо!


Часовой пояс GMT +3, время: 09:41.