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

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

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

JavaScript:

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

Ответы

Ответ 1

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

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

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

onclick="alert(remove)"

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

function remove() { [native code] }

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

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

onclick="window.remove()"

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

Ответ 2

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

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

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

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

on 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, чтобы узнать больше о различиях между методами привязки событий, а также сделать небольшой поиск по этому вопросу дайте дополнительную информацию. И, конечно же, вы бы избежали проблемы, с которой вы столкнулись, делая это таким образом.

Ответ 3

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

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

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

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