为什么我需要点击两次才能触发 .onclick 函数？

Question

我有一个非常简单的脚本，在单击跨度后会更改另一个元素的不透明度。但由于某种原因，我必须点击它两次。听说可能是有空格的东西，但是还是解决不了。

这是元素：

<div class="popup">

  <span class="popup__close" onclick="hidePopup()"><i class="fas fa-lg fa-times"></i></span>

  <h3 class="popup__heading">

    Check our newsletter!

  </h3>

  <p class="popup__text u-margin-bottom-xs">

    Register to our newsletter to see the newest offers!

  </p>

  <a href="#" class="btn btn--small btn--rounded">Register</a>

</div>

这是脚本：

<script>

  function hidePopup() {

    const close = document.querySelector('.popup__close');

    const popup = document.querySelector('.popup');

    close.addEventListener('click', function() {

      popup.style.opacity = '0';

    })

  }

</script>

Answer 1

您需要双击，因为在内addEventListener()联点击处理程序中使用附加事件处理程序。我建议您使用DOMContentLoaded事件和唯一附加事件处理程序addEventListener()window.addEventListener('DOMContentLoaded', (event) => {&nbsp; &nbsp; console.log('DOM fully loaded and parsed');&nbsp; &nbsp; const close = document.querySelector('.popup__close');&nbsp; &nbsp; const popup = document.querySelector('.popup');&nbsp; &nbsp; close.addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; popup.style.opacity = '0';&nbsp; &nbsp; });});并且不需要丑陋的内联点击处理程序和函数hidePopup()，删除它们

Answer 2

删除对 addEventListener 的无关调用，并简单地将元素隐藏在单击事件处理程序中。function hidePopup() {&nbsp;const close = document.querySelector('.popup__close');&nbsp;const popup = document.querySelector('.popup');&nbsp;popup.style.opacity = '0';}

Answer 3

在函数 hidePopup 中，注意您在函数第一次运行时“addEventListener”，当您添加 EventListener 时，不会使函数运行！您分配监听器，以便稍后如果单击，它将运行您在监听器中分配的功能。如果您使用 addEventListener，则无需再使用 onClick 属性来调用该函数...我看到您的目标是在单击关闭按钮时隐藏内容，按照您的代码，有两种方法：第一种方式//you only need to select onceconst popup = document.querySelector('.popup');&nbsp;function hidePopup() {&nbsp;popup.style.opacity = '0';}//additional function if you want to show pop upfunction showPopup() {&nbsp;popup.style.opacity = '1';}<div class="popup"><span class="popup__close" onclick="hidePopup()"><i class="fas fa-lg fa-times">X</i></span><h3 class="popup__heading">&nbsp; Check our newsletter!</h3><p class="popup__text u-margin-bottom-xs">&nbsp; Register to our newsletter to see the newest offers!</p><a href="#" class="btn btn--small btn--rounded">Register</a></div><Br><Br><br><span class="popup__show" onclick="showPopup()">click me to show pop up</span>第二种方式//select both button and Popupconst popup = document.querySelector('.popup');const close = document.querySelector('.popup__close');&nbsp;&nbsp;close.addEventListener('click', function() {&nbsp; &nbsp; popup.style.opacity = '0';});&nbsp;&nbsp;const show = document.querySelector('.popup__show');&nbsp;&nbsp;show.addEventListener('click', function() {&nbsp; &nbsp; popup.style.opacity = '1';});&nbsp;&nbsp;&nbsp;<div class="popup"><span class="popup__close"><i class="fas fa-lg fa-times">X</i></span><h3 class="popup__heading"https://stackoverflow.com/questions/63126988/why-do-i-need-to-click-two-times-to-trigger-an-onclick-function#>&nbsp; Check our newsletter!</h3><p class="popup__text u-margin-bottom-xs">&nbsp; Register to our newsletter to see the newest offers!</p><a href="#" class="btn btn--small btn--rounded">Register</a></div><span class="popup__show">Click here to show pop up</span>