JavaScript onclick 事件仅在双击时有效

Question

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

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

// **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. 即使在不太现代的浏览器中，也可以调用 confPopUp来自DOMContentLoaded事件处理程序:

   document.addEventListener("DOMContentLoaded", confPopUp);
   

3. 在现代浏览器中，添加 defer归因于您的script标签。

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

<小时/>

那么为什么它昨天看起来有效呢？据推测，因为您在没有意识到的情况下单击了窗口，所以触发了连接 .redPic 的初始事件处理程序。元素。今天恰好您在尝试单击 .redPic 之前没有单击窗口。元素，所以你发现了这个问题。这个问题一直存在。