2013-04-22 11 views
11

Ho un problema interessante, e penso di esserne arrivato alla radice, ma volevo esserne sicuro. Ho un collegamento che chiama una funzione chiamata remove(). Tutti i browser tranne Chrome non hanno riscontrato problemi con la funzione. Tuttavia, il collegamento su cui è stato fatto clic è scomparso in Chrome, anche quando ho semplificato la funzione come nell'esempio seguente. Ho visto questa domanda: Can't use "download" as a function name in javascript. Nei collegamenti, tuttavia, non ho visto nulla su "remove" come parola chiave riservata. La mia domanda è questa, ho ragione su questa parola chiave? Se sì, c'è un posto dove posso trovare un elenco di parole chiave di Google? Ho cercato e non ho trovato che questo fosse un problema da nessun'altra parte.È "rimuovere" una parola chiave riservata in Google Chrome?

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

Javascript:

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

sono in grado di utilizzare dalla console –

+1

sì, anche parole come 'status' –

+1

Penso che tu abbia ragione - dai un'occhiata a: https://productforums.google.com/forum/?fromgroups=#!topic/chrome/y9huP7JttMY – Adrift

risposta

8

Gli elementi in Chrome hanno un metodo .remove() che consente l'auto-rimozione di un elemento invece di doverlo fare dal genitore.

Il problema è che quando si utilizzano gestori di attributi, si ottiene una diversa catena di portata. Quella catena dell'ambito include l'elemento stesso, così come lo document. Ciò significa che tutte le proprietà dell'elemento e document vengono visualizzate come variabili.

Perché avete chiamato la vostra funzione remove(), e perché è una funzione/variabile globale, è essere pedinato dalla .remove proprietà (ora variabile) sull'elemento stesso. Questo può essere visto con un avviso. Se si cambia il gestore per:

onclick="alert(remove)" 

... si otterrà qualcosa del tipo:

function remove() { [native code] } 

Quindi non è che è riservato, ma piuttosto che è utilizzato come una proprietà che finisce shadowing il globale.


per risolvere il problema, utilizzare il direttamente globale:

onclick="window.remove()" 

o cambiare il nome della funzione.

+0

Ottima spiegazione, grazie. Cambierò semplicemente il nome della funzione. – illinoistim

+0

Prego. –

+0

Volevo solo notare che '.remove()' non è solo una proprietà chrome elementi hanno - è una parte della nuova spec :) –

1

ho avuto alcun problema di cromo usarlo, anche non in questo modo

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

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

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

su jsfiddle

Inline javascript è considerata cattiva pratica.

Se si dispone di più elementi che utilizzano la stessa funzione, basta aggiungere più linee, come questo

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

o si potrebbe ottenere un NodeList e loop through che

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

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

È possibile dare un'occhiata in un altro answer here on SO per saperne di più sulle differenze tra i metodi di associazione degli eventi, anche una piccola ricerca G sull'argomento ti fornirà ulteriori informazioni. E, naturalmente, avresti evitato il problema che stavi vivendo in questo modo.

+0

Puoi spiegare di più sul motivo per cui è meglio usare addEventListener? Cosa devo fare se c'è più di un riferimento alla funzione di rimozione? – illinoistim

+0

Speriamo che siano sufficienti informazioni per rispondere alla tua ulteriore domanda, ma vedo che hai già scelto una risposta di cui eri felice. – Xotic750

+0

Ti ho dato un +1. – illinoistim

1

Non riesco a trovare alcuna documentazione su di esso, ma gli elementi DOM in Chrome hanno un metodo nativo remove che apparentemente li rimuove. In onclick, this si riferisce effettivamente all'elemento stesso, quindi termina chiamando lo this.remove() che rimuove l'elemento. Per ovviare a questo, è sufficiente chiamare lo window.remove().

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

Sarebbe anche meglio usare di eventi standard vincolante via addEventListener che non ha questo problema quando semplicemente chiamando remove:

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

+0

È una parte delle specifiche DOM :) http://dom.spec.whatwg.org/# dom-childnode-rimuove anche abbastanza nuovo. –