為什么我需要點擊兩次才能觸發an.onclick function？

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 的無關調用，並簡單地將元素隱藏在 click 事件處理程序中。

function hidePopup() {
 const close = document.querySelector('.popup__close');
 const popup = document.querySelector('.popup');
 popup.style.opacity = '0';
}

Answer 2

在使用內聯單擊處理程序中的addEventListener()附加事件處理程序時，您需要雙擊。

我建議您使用DOMContentLoaded事件並使用addEventListener()單獨附加事件處理程序

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');

    const close = document.querySelector('.popup__close');
    const popup = document.querySelector('.popup');
    close.addEventListener('click', function() {
        popup.style.opacity = '0';
    });
});

並且不需要丑陋的內聯點擊處理程序和 function hidePopup() ，刪除它們

Answer 3

在 function hidePopup 中，請注意在 function 第一次運行時“addEventListener”，

當您添加事件偵聽器時，不會使 function 運行，您分配偵聽器以便稍后單擊。 然后它將運行您在偵聽器中分配的 function。

如果你使用 addEventListener，你不需要再使用 onClick 屬性來調用 function...

---

我看到您的目標是在單擊關閉按鈕時隱藏內容，按照您的代碼，有兩種方法：

第一種方式

 //you only need to select once const popup = document.querySelector('.popup'); function hidePopup() { popup.style.opacity = '0'; } //additional function if you want to show pop up function showPopup() { 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"> 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> <Br><Br><br> <span class="popup__show" onclick="showPopup()"> click me to show pop up </span>

第二種方式

 //select both button and Popup const popup = document.querySelector('.popup'); const close = document.querySelector('.popup__close'); close.addEventListener('click', function() { popup.style.opacity = '0'; }); const show = document.querySelector('.popup__show'); show.addEventListener('click', function() { popup.style.opacity = '1'; });

 <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#> 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> <span class="popup__show">Click here to show pop up</span>