Question

我对HTML或JavaScript并不陌生，尽管我不经常使用它们。但是，我对PHP还是很陌生，并且在尝试获取嵌入在PHP中的HTML中的按钮上的click事件时，当前遇到一个奇怪的问题：

<!DOCTYPE html>
<html lang="de">

<head>
  <title>Blah</title>
  <meta charset="utf-8">
</head>

<body>
  <button type="button" onclick="function() { alert('Moo!'); }">Some button</button>
</body>

</html>

当我单击按钮时什么也没有发生。是的，原件中当然会有更多标记，但这与我的问题无关。 W3C标记验证服务表示没有错误，并且当我从body标签底部的脚本中警告moo时，它也可以正常工作。好像点击事件没有触发...知道为什么吗？

Answer 1

这是因为您定义了一个函数而不执行了它。不要将其包装在函数中。

onclick="alert('Moo!');"

如果将其包装在函数中。您将需要执行它。

onclick="(function() { alert('Moo!'); })()"

Answer 2

问题是您的匿名函数语法。您正在使用函数定义，但没有立即调用它或给它命名，因此浏览器与它没有任何关系。

如果您希望它在单击时立即被调用，您可以尝试像这样重写按钮部分：

<button type="button" onclick="(function() { alert('Moo!'); })();">Some button</button>

但是我个人的喜好是将其写入命名函数并改为将其作为处理程序。

Answer 3

内联事件处理程序中不能包含匿名函数-使用alert("Moo")

<!DOCTYPE html>
<html lang="de">

<head>
  <title>Blah</title>
  <meta charset="utf-8">
</head>

<body>
  <button type="button" onclick="alert('Moo!')">Some button</button>
</body>

</html>

您还可以使用命名函数：

function moo() {
  alert("Moo!");
}

<!DOCTYPE html>
<html lang="de">

<head>
  <title>Blah</title>
  <meta charset="utf-8">
</head>

<body>
  <button type="button" onclick="moo()">Some button</button>
</body>

</html>

甚至是IIFE：

<!DOCTYPE html>
<html lang="de">

<head>
  <title>Blah</title>
  <meta charset="utf-8">
</head>

<body>
  <button type="button" onclick="(function() { alert('Moo!'); })()">Some button</button>
</body>

</html>

Answer 4

您可以通过3种方式在onclick属性中绑定动作：

<button type="button" onclick="alert('Moo!');">Some button</button>
使用JS代码创建函数。 <button type="button" onclick="someFunc()">Some button</button>
使用closures：<button type="button" onclick="(function() { alert('Moo!'); })()">Some button</button>

`

按钮上的Click事件似乎未触发

4 个答案: