Czy "usuń" zarezerwowane słowo kluczowe w Google Chrome?

Question

Mam interesujący problem i myślę, że dotarłem do jego korzenia, ale chciałem mieć pewność. Mam łącze, które wywołuje funkcję o nazwie remove(). Wszystkie przeglądarki oprócz Chrome nie miały żadnych problemów z tą funkcją. Jednak kliknięty link zniknął w Chrome, nawet gdy uprościliśmy tę funkcję, jak w poniższym przykładzie. Widziałem to pytanie: Can't use "download" as a function name in javascript. Jednak w linkach nie widziałem nic o "usuwaniu" jako zastrzeżonym słowie kluczowym. Moje pytanie brzmi, mam rację, że jest to słowo kluczowe? Jeśli tak, to czy mogę znaleźć listę słów kluczowych Google? Szukałem i nie znalazłem nigdzie indziej problemu.

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

Javascript:

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

Answer 1

Elementy w Chrome mają metodę .remove(), która pozwala na samodzielne usunięcie elementu zamiast wykonywania go od rodzica.

Problem polega na tym, że podczas korzystania z funkcji obsługi atrybutów otrzymujesz inny łańcuch zasięgu. Ten łańcuch zasięgu obejmuje sam element, jak również document. Oznacza to, że wszystkie właściwości elementu i document pojawiają się jako zmienne.

Bo nazwie czynność remove(), a ponieważ jest globalną funkcję/zmiennej, jest ona zasłonięta przez właściwość .remove(obecnie zmiennym) na samego elementu. Można to zobaczyć za pomocą alertu. Jeśli zmienisz obsługi do:

onclick="alert(remove)" 

... dostaniesz coś takiego:

function remove() { [native code] } 

Więc to nie tak, że to zarezerwowany, ale raczej, że jest on wykorzystywany jako właściwość, która kończy się shadowing globalny.

---

Aby go naprawić, albo użyć globalny bezpośrednio:

onclick="window.remove()" 

Albo zmienić nazwę funkcji.

Answer 2

nie miałem problem chromu go używać, a nie w ten sposób

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

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

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

na jsfiddle

Inline JavaScript jest uważane za złą praktyką.

Jeśli masz więcej elementów za pomocą tej samej funkcji, po prostu dodaj więcej linii, jak to

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); 

czy można dostać NodeList i pętli przez tą

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

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

Można spojrzeć pod innym numerem answer here on SO, aby dowiedzieć się więcej o różnicach między metodami wiążącymi zdarzenia, również trochę G wyszukując na temacie da ci dalsze informacje. I oczywiście uniknąłbyś problemu, którego doświadczasz, robiąc to w ten sposób.

Answer 3

Nie mogę znaleźć żadnej dokumentacji, ale elementy DOM w Chrome mają natywną metodę remove, która pozornie je usuwa. W onclick, this faktycznie odnosi się do samego elementu, więc kończy się wywołanie this.remove(), który usuwa element. Aby obejść ten problem, możesz po prostu zadzwonić pod numer window.remove().

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

Byłoby też lepiej używać standardowego zdarzenia wiążącego poprzez addEventListener które nie mają tego problemu, gdy po prostu dzwoniąc remove:

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