问题 在Google Chrome中“删除”保留的关键字?


我有一个有趣的问题,我想我已经掌握了它的根源,但我想确定。我有一个调用名为remove()的函数的链接。除Chrome之外的所有浏览器都没有问题。但是,点击的链接在Chrome中消失了,即使我简化了下面示例中的功能。我见过这个问题: 不能在javascript中使用“下载”作为函数名称。但是,在链接中,我没有看到任何关于“删除”作为保留关键字的内容。我的问题是,我是关于这是一个关键字的正确吗?如果是这样,我可以在任何地方找到Google关键字列表吗?我搜索过,并没有发现这是其他地方的问题。

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

使用Javascript:

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

5575
2018-04-22 15:50


起源

我可以从控制台使用它 - Explosion Pills
是的,还有像 status - Arun P Johny
我认为你是对的 - 看看: productforums.google.com/forum/?fromgroups=#!topic/chrome/... - Adrift
尝试 status = {} 将给出一个字符串值 "[object Object]" - Arun P Johny
你可以看到 remove 是Chrome中锚元素的成员: var anch = document.createElement("a"); console.log(anch.remove); - apsillers


答案:


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

问题是,当使用属性处理程序时,您将获得不同的范围链。该范围链包括元素本身以及 document。这意味着元素的所有属性和 document 显示为变量。

因为你命名了你的功能 remove(),因为它是一个全局函数/变量,它正被阴影笼罩着 .remove 属性 (现在变量) 关于元素本身。这可以通过警报看到。如果您将处理程序更改为:

onclick="alert(remove)"

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

function remove() { [native code] }

所以它不是保留的,而是它被用作最终影响全球的财产。


要修复它,请直接使用全局:

onclick="window.remove()"

或者更改功能名称。


8
2018-04-22 15:57



很好的解释,谢谢。我只会更改功能名称。 - illinoistim
别客气。 - silly little me
只是想注意 .remove() 不只是属性铬元素有 - 它是新规范的一部分:) - Benjamin Gruenbaum


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

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

使用标准事件绑定也会更好 addEventListener 简单地调用时没有这个问题 remove

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


1
2018-04-22 15:57



它是DOM规范的一部分:) dom.spec.whatwg.org/#dom-childnode-remove 也很新。 - Benjamin Gruenbaum


我没有使用铬的问题,不是这样的

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

或者你可以获得一个nodelist并循环遍历

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

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

你可以看看另一个 在这里回答 要了解更多关于事件绑定方法之间的差异,还要做一点G搜索主题将为您提供进一步的信息。当然,您可以通过这种方式避免遇到的问题。


1
2018-04-22 15:57



你能解释一下为什么使用addEventListener会更好吗?如果对remove函数有多个引用,我该怎么办? - illinoistim
希望有足够的信息来回答你的进一步问题,但我看到你已经选择了一个你满意的答案。 - Xotic750
我给了你一个+1。 - illinoistim