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函數。