代码之家 › 专栏 › 技术社区 › TimB

单击按钮上的事件似乎未触发

html php javascript

-1

TimB · 技术社区 · 7 年前

我对HTML或JavaScript并不陌生,尽管我不经常使用它们。然而,我对PHP非常陌生,在尝试在嵌入PHP的HTML中的按钮上获取单击事件时,我目前面临一个奇怪的问题:

<!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发出警报时,它也可以正常工作。看起来点击事件没有触发。。。知道为什么吗?

4 回复 | 直到 7 年前

Stephen Kennedy 7 年前

如果希望在单击时立即调用它,可以尝试重写按钮部分,如下所示:

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

但我个人的偏好是将其写入一个命名函数,并将其作为处理程序调用。

epascarello 7 年前

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

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

如果你把它包装成一个函数。你需要执行它。

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

Jack Bashford 7 年前

内联事件处理程序中不能有匿名函数-使用 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>

甚至是一种生活:

<!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>

Vlad Levitskiy 7 年前

您可以在中绑定操作 onclick 属性有3种方式:

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前