我必須雙擊跟隨按鈕才能運行這是由於使用了 click 事件 2 次

Question

我正在研究關注按鈕，在 JavaScript 的幫助下，我想出了以下代碼。

但問題是我必須雙擊跟隨按鈕才能運行這是由於使用了 click 事件 2 次。 我也願意接受更好的方法來解決這個問題。

 var value = null; const onClick = (event) => { // event.target.id value = event.target.id; console.log(value); document.getElementById(`${value}`).addEventListener('click',function(){ // console.log(value.id); if(this.classList.contains('follow')){ this.classList.remove('follow'); this.innerHTML ="Following"; this.style.backgroundColor = 'green'; }else{ this.classList.add('follow'); this.style.backgroundColor = 'rgb(27,18,83)'; this.innerHTML="Follow"; } }) } window.addEventListener('click', onClick);

Answer 1

有一個雙擊事件。 您可以檢查它是否滿足您的要求。

MDN 鏈接 - https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event

Answer 2

對於具有相同 function 的多個按鈕，我會給它們所有相同的 class（例如“btn”）。 然后在 JS 中只需使用這個 class 獲取所有元素，循環遍歷您將獲取的 HTMLCollection 並為每個元素分配一個事件監聽器。 當您想更改按鈕上的某些內容時，您必須在 function 中使用event.target ：

 let buttons = document.getElementsByClassName("btn"); for (btn of buttons) { btn.addEventListener("click", (event) => { if(event.target.classList.contains('follow')){ event.target.classList.remove('follow'); event.target.innerHTML ="Following"; event.target.style.backgroundColor = 'green'; }else{ event.target.classList.add('follow'); event.target.style.backgroundColor = 'rgb(27,18,83)'; event.target.innerHTML="Follow"; } }); }

 <button class="btn">1</button> <button class="btn">2</button>