Является ли "удалить" зарезервированное ключевое слово в Google Chrome?

У меня есть интересная проблема, и я думаю, что дошел до ее корня, но я хотел быть уверен. У меня есть ссылка, которая вызывает функцию с именем remove(). Все браузеры, кроме Chrome, не имели проблем с этой функцией. Однако ссылка, по которой щелкнули, исчезла в Chrome, даже когда я упростил функцию, как в примере ниже. Я видел этот вопрос: не могу использовать "скачать" в качестве имени функции в JavaScript. В ссылках, однако, я не увидел ничего о "удалить" как зарезервированное ключевое слово. Мой вопрос заключается в следующем: я правильно сказал, что это ключевое слово? Если да, могу ли я найти список ключевых слов Google? Я искал и не нашел, что это проблема где-либо еще.

<a href="javascript:void(0)" onclick="remove()">Remove</a>

Javascript:

function remove(){
 alert("Hi");
}
Источник

3 ответа

Решение

Элементы в Chrome имеют .remove() метод, который позволяет самостоятельно удалять элемент вместо того, чтобы делать это от родителя.

Проблема в том, что при использовании обработчиков атрибутов вы получаете другую цепочку областей видимости. Эта цепочка включает в себя сам элемент, а также document, Это означает, что все свойства элемента и document показать как переменные.

Потому что вы назвали свою функцию remove()и поскольку это глобальная функция / переменная, она скрывается .remove свойство (теперь переменное) для самого элемента. Это можно увидеть с предупреждением. Если вы измените ваш обработчик на:

onclick="alert(remove)"

... вы получите что-то вроде:

function remove() { [native code] }

Таким образом, дело не в том, что оно зарезервировано, а в том, что оно используется как свойство, которое в итоге скрывает глобальное.

Чтобы это исправить, либо используйте глобальный напрямую:

onclick="window.remove()"

Или измените имя функции.

Источник

У меня не было проблем с использованием хрома, ну не так

<a href="#" id="remove">Remove</a>

function remove() {
    alert("Hi");
}

document.getElementById("remove").addEventListener("click", remove, false);

на jsfiddle

Встроенный JavaScript считается плохой практикой.

Если у вас есть больше элементов, использующих одну и ту же функцию, просто добавьте больше строк, как это

document.getElementById("remove1").addEventListener("click", remove, false);
document.getElementById("remove2").addEventListener("click", remove, false);
document.getElementById("remove3").addEventListener("click", remove, false);
document.getElementById("remove4").addEventListener("click", remove, false);

или вы могли бы получить список узлов и пройти через это

var nodelist = document.querySelectorAll("[id^=remove]");

Array.prototype.forEach.call(nodelist, function (element) {
    element.addEventListener("click", remove, false);
}

Вы можете взглянуть на другой ответ здесь на SO, чтобы узнать больше о различиях между методами привязки событий, а также выполнить небольшой поиск G по этой теме, чтобы получить дополнительную информацию. И, конечно, вы бы избежали проблемы, с которой столкнулись, если бы делали это таким образом.

Источник

Я не могу найти какую-либо документацию по нему, но элементы DOM в Chrome имеют собственный метод remove это, очевидно, удаляет их. В onclick, this на самом деле относится к самому элементу, так что в конечном итоге вызывает this.remove() который удаляет элемент. Чтобы обойти это, вы можете просто позвонить window.remove() вместо.

http://jsfiddle.net/3YkZH/1/

Также было бы лучше использовать стандартную привязку событий через addEventListener который не имеет этой проблемы при простом вызове remove:

http://jsfiddle.net/3YkZH/2/

Источник
Другие вопросы по тегам