Метод 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 например, код будет лишним. |
| Часовой пояс GMT +3, время: 11:13. |