11

我有一个有趣的问题，我想我找到了它的根源，但我想确定一下。我有一个链接，它调用一个名为 remove() 的函数。除 Chrome 之外的所有浏览器都没有该功能的问题。然而，点击的链接在 Chrome 中消失了，即使我在下面的示例中简化了功能。我见过这个问题：Can't use "download" as a function name in javascript。但是，在链接中，我没有看到任何关于“删除”作为保留关键字的信息。我的问题是这个，我对这是一个关键字是正确的吗？如果是这样，我可以在任何地方找到 Google 关键字列表吗？我已经搜索并没有发现这是其他任何地方的问题。

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

Javascript：

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

3 回答 3

8

Chrome 中的元素有一种.remove()方法，允许自行删除元素，而不必从父元素中删除。

问题在于，当使用属性处理程序时，您会得到不同的作用域链。该范围链包括元素本身，以及document. 这意味着元素的所有属性都document显示为变量。

因为您命名了您的函数，并且因为它是一个全局函数/变量，所以它被元素本身的属性（现在是变量）remove()所遮蔽。这可以通过警报看到。如果您将处理程序更改为：.remove

onclick="alert(remove)"

...你会得到类似的东西：

function remove() { [native code] }

所以不是它被保留，而是它被用作最终影响全局的属性。

要修复它，请直接使用全局：

onclick="window.remove()"

或更改函数名称。

于 2013-04-22T15:57:28.173 回答
1

我在使用铬时没有任何问题，不是以这种方式

<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 搜索将为您提供更多信息。当然，您可以通过这种方式避免遇到的问题。

于 2013-04-22T15:57:17.083 回答
1

我找不到任何文档，但 Chrome 中的 DOM 元素有一个本机方法remove，显然可以删除它们。在onclick,this实际上是指元素本身，因此它最终会调用this.remove()删除元素。为了解决这个问题，你可以打电话window.remove()。

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

最好使用标准事件绑定，通过addEventListener它在简单调用时不会出现此问题remove：

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

于 2013-04-22T15:57:41.970 回答