首頁猿問為什么我需要點擊兩次才能觸發...

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

JavaScript

夢里花落0921 2022-12-09 16:43:10

我有一個非常簡單的腳本，在單擊跨度后會更改另一個元素的不透明度。但由于某種原因，我必須點擊它兩次。聽說可能是有空格的東西，但是還是解決不了。這是元素：<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>

查看完整描述

3 回答

德瑪西亞99

TA貢獻1770條經驗獲得超3個贊

您需要雙擊，因為在內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()，刪除它們

反對回復 2022-12-09

森欄

TA貢獻1810條經驗獲得超5個贊

刪除對 addEventListener 的無關調用，并簡單地將元素隱藏在單擊事件處理程序中。

function hidePopup() {

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

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

popup.style.opacity = '0';

}

反對回復 2022-12-09

肥皂起泡泡

TA貢獻1829條經驗獲得超6個贊

在函數 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';

}

</span>

Check our newsletter!

</h3>

</p>

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

</div>

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

});

</span>

Check our newsletter!

</h3>

</p>

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

</div>

<span class="popup__show">Click here to show pop up</span>

反對回復 2022-12-09

3 回答
0 關注
172 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么我需要點擊兩次才能觸發 .onclick 函數？

為什么我需要點擊兩次才能觸發 .onclick 函數？

3 回答

添加回答

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

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