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';
    });
});

并且不需要难看的内联单击处理程序和功能hidePopup()，将其删除

Answer 3

在函数hidePopup中，请注意，当函数第一次运行时，您会“ addEventListener”

当您添加EventListener时，不会使函数运行！您可以分配侦听器，以便稍后单击它时，它将运行您在侦听器中分配的功能。

如果您使用addEventListener，则无需再使用onClick属性来调用该函数...

我看到您的目标是在单击关闭按钮时隐藏内容，通过遵循您的代码，有两种方法：

第一种方法

//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>

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

3 个答案: