JavaScript onclick 事件仅在双击时起作用

Question

我写信是因为我需要解决这个问题。直到最近，代码运行良好，我已经使用了很长时间，但是昨天，当我测试页面时，一切都改变了。

这个想法是单击带有锚标记的图像，该标记会将用户重定向到另一个页面，并且在这样做时，应该会弹出一个确认对话框，询问用户是否需要。我没有更改代码中的任何内容，所以我不知道发生了什么。代码如下：

// **JavaScript**
function confPopUp() {
  for (var i = 0; i < 6; i++) {
    document.getElementsByClassName("redPic")[i].onclick = redConf;
  }
}

function redConf() {
  var conf = confirm(
    "You're about to be redirected to our social media page. Do you accept?"
  );
  if (conf) {
    return true;
  } else {
    return false;
  }
}

window.onclick = confPopUp;

<!-- **HTML** //THERE ARE 5 MORE ELEMENTS WITH THE CLASS NAME "redPic". -->

<a href="https://www.madridsolutions.es" target="_blank"><img class="redPic" src="images/instagramLogo.png" alt="Instagram Logo"></a>

    
    
       

问题是我现在正在测试它，但它不能正常工作，前天它工作正常，只需单击一次，现在它可以双击。 非常感谢您的帮助，谢谢。

Answer 1

当页面首次加载时，您正在设置一个单个事件处理程序：

window.onclick=confPopUp;

稍后，当单击窗口中的任意位置时，将运行您的 confPopUp 函数，该函数将单击处理程序连接到 .redPic 元素上。

稍后，如果您单击 .redPic 元素，您的 redConf 函数就会运行。

如果您希望.redPic 元素的处理程序连接到页面加载，请调用 confPopUp 而不是使其成为点击处理程序。变化：

window.onclick=confPopUp;

到

confPopUp();

确保此代码在.redPic 元素存在之后运行。有几种方法可以做到这一点，选择适合您的目标浏览器和偏好的一种：

1. 将代码放在文档末尾的script 标记中，就在结束</body> 标记之前。这适用于所有浏览器，无论多旧。

2. 即使在现代浏览器中，也可以从 DOMContentLoaded 事件处理程序调用 confPopUp：

   document.addEventListener("DOMContentLoaded", confPopUp);
   

3. 在现代浏览器中，将defer 属性添加到您的script 标记中。

4. 在现代浏览器中，将type="module" 添加到您的script 标记以使您的脚本成为一个模块。就像defer 一样推迟它，和 将其置于严格模式（这是一个好主意），并将其中的代码置于模块范围而不是全局范围（真的很拥挤） .

---

那么为什么它昨天似乎起作用了？大概是因为您在没有意识到的情况下单击了窗口，触发了连接.redPic 元素的初始事件处理程序。今天碰巧你在尝试点击.redPic元素之前没有点击窗口，所以你发现了这个问题。问题一直存在。