Метод 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-функция и куда ее прописывать? до этого просто не использовал такие полифиллы. Надеюсь на помощь |
yaparoff,
добавить один раз на страницу в начале <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> |
или вот этот код в начало скрипта.
(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,
там ничего или будет только closest и только в ie |
рони, файл то откывали?
<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 запустите |
j0hnik,
протестируйте с этими параметрами <script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.closest"></script> https://cdn.polyfill.io/v2/docs/examples |
рони, 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; }; } |
рони,
Этот норм |
yaparoff,
преимущество сервиса cdn.polyfill.io в том что он самостоятельно определяет что грузить надо или нет необходимости, в вашем случае для firefox например, код будет лишним. |
рони,
понял. поставил скрипт <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> перед всем скриптами. А тот файл с полифиллом удалил Работает. Спасибо! |
Часовой пояс GMT +3, время: 09:41. |