问题
I have an interesting problem, and I think I got to the root of it, but I wanted to be sure. I have a link that calls a function called remove(). All browsers except Chrome had no issues with the function. However, the link that is clicked disappeared in Chrome, even when I simplified the function as in the example below. I have seen this question: Can't use "download" as a function name in javascript. In the links, however, I did not see anything about "remove" as a reserved keyword. My question is this, I am correct about this being a keyword? If so, is there anywhere I can find a list of Google keywords? I have searched and have not found this to be a problem anywhere else.
<a href="javascript:void(0)" onclick="remove()">Remove</a>
Javascript:
function remove(){
alert("Hi");
}
回答1:
Elements in Chrome have a .remove()
method which allows for self-removal of an element instead of having to do it from the parent.
The trouble is that when using attribute handlers, you get a different scope chain. That scope chain includes the element itself, as well as the document
. This means that all properties of the element and document
show up as variables.
Because you named your function remove()
, and because it's a global function/variable, it is being shadowed by the .remove
property (now variable) on the element itself. This can be seen with an alert. If you change your handler to:
onclick="alert(remove)"
...you'll get something like:
function remove() { [native code] }
So it's not that it's reserved, but rather that it's used as a property which ends up shadowing the global.
To fix it, either use the global directly:
onclick="window.remove()"
Or change the function name.
回答2:
I can't find any documentation on it, but DOM elements in Chrome have a native method remove
that apparently removes them. In onclick
, this
actually refers to the element itself so it ends up calling this.remove()
which removes the element. To get around this, you can just call window.remove()
instead.
http://jsfiddle.net/3YkZH/1/
It would also be better to use standard event binding via addEventListener
which does not have this problem when simply calling remove
:
http://jsfiddle.net/3YkZH/2/
回答3:
I had no issue in chromium using it, well not in this manner
<a href="#" id="remove">Remove</a>
function remove() {
alert("Hi");
}
document.getElementById("remove").addEventListener("click", remove, false);
on jsfiddle
Inline javascript is considered bad practice.
If you have more elements using the same function, just add more lines, like this
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);
or you could get a nodelist and loop through that
var nodelist = document.querySelectorAll("[id^=remove]");
Array.prototype.forEach.call(nodelist, function (element) {
element.addEventListener("click", remove, false);
}
You can take a look at another answer here on SO to find out more about the differences between event binding methods, also do a little G searching on the subject will give you further information. And of course, you would have avoided the issue that you were experiencing by doing it in this manner.
来源:https://stackoverflow.com/questions/16151295/is-remove-a-reserved-keyword-in-google-chrome