HTML和JavaScript-如何将div事件添加到div

Question

我一直在跟踪示例，但我的小提琴无法正常工作。 这是代码：

  var showMessage; var divTag = document.getElementById("myDiv"); divTag.onClick = showMessage(); showMessage = function() { alert("You clicked me."); } 

 <div id="myDiv" style="height: 100px; width: 100px; background-color: pink;"> </div> 

我可能缺少一些愚蠢的东西，但我看不到它。 我在这里读出，可以在div上放置click事件。 有人知道我在做什么错吗？

PS：是的，我不知道如何解密或修复错误。

Answer 1

将您的JS更改为此：

function showMessage() {
  alert("You clicked me.");
}

var divTag = document.getElementById("myDiv");
divTag.addEventListener('click', showMessage);

您的代码： divTag.onClick = showMessage(); 正在调用函数showMessage而不是函数的响应。

showMessage被调用，并且其返回值（ undefined ）是您传递给onClick属性的内容。

次要问题：如果要让使用屏幕阅读器的盲人用户使用此页面，最好使用<button>或<a>标记。 要么，要么您需要模拟使屏幕阅读器正常工作所需的所有东西。

Answer 2

您遇到了几个问题：

• 您将“ showMessage”定义为一个空变量，然后尝试将其调用为一个函数，然后将其定义为一个函数。
• onClick与onclick是不同的东西。
• 尝试将showMessage分配给onclick事件时，您调用了showMessage，而不是分配了函数本身，而是最终分配了它的（空）返回值。

这是您的代码的更正版本：

  showMessage = function() { alert("You clicked me."); } var divTag = document.getElementById("myDiv"); divTag.onclick = showMessage; 

 <div id="myDiv" style="height: 100px; width: 100px; background-color: pink;"></div> 

那是香草JS。 由于该问题也被标记为“ jQuery”，因此这是同一件事的jQuery版本：

$('#myDiv').on("click",function() {alert("you clicked me")}); 

Answer 3

既然您已经标记了jQuery，我就给您jQuery解决方案：

$('#myDiv').click(showMessage);

但是，请确保在jQuery click事件绑定之前（上方）设置showMessage函数。