Question

任何人都可以解释为什么这段代码会在点击FF和Chrome后删除按钮？ IE将显示警告。

<html>
<head>
<script>
function remove()
{
alert('test');
}

</script>
</head>
<body>
<input type="button" onclick="remove();" value="Remove"/>
</body>
</html>

Answer 1

因为javascript有一个删除方法。将你的函数命名为abcd，它很好：

<html>
<head>
<script>
function abcd()
{
alert('test');
}

</script>
</head>
<body>
<input type="button" onclick="abcd();" value="Remove"/>
</body>
</html>

Answer 2

Don't use inline event handlers或者至少知道你在做什么。

问题是元素本身的属性在内联事件处理程序的范围内，DOM nodes have a remove method *****。因此remove()相当于this.remove()，即它调用按钮的remove方法。

<强>解决方案：

重命名您的功能
Use a different way to bind event handlers

*：这是一个相对较新的API，IE尚不支持，所以它在IE中运行良好。

Answer 3

使用内联事件处理程序通常被认为是不好的做法，因为您要求浏览器解析来自html字符串的javascript事件，更好的方法如下：

<html>
<head>
<script>
  window.addEventListener("load",function(){
    window.myButton = document.getElementById("myButton");
    window.myButton.addEventListener("click",myButtonFunction);
  });

  function myButtonFunction()
  {
    alert('test');    
  }

</script>
</head>
<body>
<input id="myButton" type="button" value="Remove"/>
</body>
</html>

除非您想在函数中访问它，否则您不需要将其声明为窗口变量（全局）。（但也可以通过document.getElementById（＆＃34; myButton＆＃34;）再次访问它。

执行名称为remove（）的函数后，从html页面中删除按钮

3 个答案: