JavaScript中的onclick事件函数

Question

我在一个HTML页面中有一些JavaScript代码和一个按钮。我有一个名为click()的函数来处理按钮的onClick事件。按钮的代码如下：

<input type="button" onClick="click()">button text</input>  

按钮点击后，

函数并未被调用。我在这里做错了什么？

- Nate Koppenhaver

---

你在控制台中遇到了错误吗？能否发布一下点击函数。这个函数在这里对我有效 **here**。 - qwertymk

我认为您需要在函数后加上分号，就像这样：<input type="button" onClick="click();">按钮文本</input>。 - emco

尝试使用以下代码：onclick="javascript:click();" - Dejan Marjanović

onclick 已经默认为 JavaScript。只有在为链接设置 href 时才会使用 javascript:click();。此外，除非也要调用第二个函数，否则不需要分号。 - Mark

你把click()函数声明/放在哪里了？它是否在正确的作用域内？ - ace

Answer 1

有两点需要注意：

1. 应该写成：

   <input type="button" value="button text" />
   

   而不是

   <input type="button">button text</input>
   

   你应该重新命名你的函数。函数click()已经在一个按钮上定义了（它模拟了点击），并且优先级比你的方法更高。
   
   请注意，这里有一些建议是明显错误的，并且你不应该花太多时间在它们上面：
   • 不要使用onclick="javascript:myfunc()"。只在超链接的href属性内使用javascript:前缀：<a href="javascript:myfunc()">。
   • 你不必以分号结尾。onclick="foo()"和onclick="foo();"都可以正常工作。
   • HTML中的事件属性不区分大小写，因此onclick，onClick和ONCLICK都可以。通常将属性写成小写：onclick。请注意，JavaScript本身是区分大小写的，所以如果你写document.getElementById("...").onclick = ...，那么它必须全部小写。

- Elian Ebbing

---

这只是我在Windows 95上用IE5编写的一个示例脚本，因此我不使用任何DOM内容，因为我不知道它的支持情况如何。不过我会尝试一下。谢谢。 - Nate Koppenhaver

是的，我只需要更改函数名称就可以了。谢谢你！我真的卡住了。 - Nate Koppenhaver

@ElianEbbing 感谢您抽出时间解释这些事情...虽然它们很小，但它们确实帮助我理解了我做错了什么。 - Louie

@hitesh 不，这是一个不同的问题：JSFiddle将所有的javascript代码放在$(window).load(function() { ... })中。这意味着test()不是全局可访问的。如果你将左侧的下拉菜单从onLoad改为No wrap，那么你的例子应该可以在JSFiddle中工作。 - Elian Ebbing

谢谢，那个起作用了：还有一个问题——我们在jsfiddle中不应该使用document.ready吗？ - Hitesh

Answer 2

click()是一个保留字并且已经是一个函数，把它的名字从click()改为runclick()就可以正常工作了。

- Jimmy Rousseau

Answer 3

请确认您是否调用了相同的函数。

<script>function greeting(){document.write("hi");}</script>

<input type="button" value="Click Here" onclick="greeting();"/>

- user3669026

Answer 4

试试这个

<input type="button" onClick="return click();">button text</input>  

- Nathanphan

Answer 5

<script>
//$(document).ready(function () {
function showcontent() {
        document.getElementById("demo22").innerHTML = "Hello World";
}
//});// end of ready function
</script>

我曾经遇到过同样的问题，即onclick函数调用无法正常工作。我将该函数包含在通常用于包装jquery脚本的"$(document).ready(function(){});"块内。注释掉这个块解决了问题。

- Tony

Answer 6

我建议你这样做： <input type="button" value="按钮文本" onclick="click()"> 希望这能帮到你！

- Kyle Gagnon

---

我认为问题在于他的“onclick”属性，而不是显示文本值的方式。 - Sidd Menon

Answer 7

今天我也遇到了这个问题。函数名可能与关键字冲突。我的情况是scrape()。我更改了函数名，一切正常运作。

- lover summer

Answer 8

尝试修复大写问题。使用onclick而不是onClick

参考：Mozilla开发者文档

- Wylie

---

你的链接是一个XUL链接。这是你想要的：https://developer.mozilla.org/en/DOM/element.onclick - user1385191

所有大写都可以工作，浏览器不应该在onClick、ONCLICK、onclick、Onclick或其他任何情况下有所区别。我更喜欢驼峰式命名法，因此我使用它。 - Nate Koppenhaver

你说得对。Javascript是大小写敏感的，这可能是我困惑的根源。 - Wylie

即使 MDN 上的文档使用全小写，你也不应该在别人的问题上表达你的困惑，这样做不好。 - Adi Prasetyo

Answer 9

是的，你应该更改函数的名称。Javascript 有保留方法，而 onclick = >>>> click() <<<< 就是其中之一，所以只需将其重命名，添加一个 's' 到结尾或其他什么都可以。

- Jerry Noel

Answer 10

一个项目不响应事件的可能原因之一是该项目被另一个项目重叠。 在这种情况下，您可能需要为您希望单击的项目设置更高的z-index。

- ytobi