如何在javascript中僅單擊一次后禁用div而不禁用其中的元素的click事件？

Question

我正在嘗試在elemId div內的單擊上創建一個按鈕。 但是希望僅將按鈕附加一次，然后僅在div而不是在button元素上禁用click事件。

 document.getElementById('elemId').addEventListener('click', 
   function(e){

   var button = document.createElement("button");
   var buttonText = document.createTextNode("click me");
   button.appendChild(buttonText);
   document.getElementById('elemId').appendChild(button)


   document.getElementById('elemId').removeEventListener('click', 
     function(e){
     // removeEventListener doesn't work
  })

   document.getElementById('elemId').disabled = true 
     // disabled  doesn't work 
  })

的HTML：

<div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div>

Answer 1

您可以將函數命名為任意名稱，在本示例中，我將其命名為“ x”，然后在要刪除click事件監聽器時引用它。

 document.getElementById('elemId').addEventListener('click', function x(e) { var button = document.createElement("button"); var buttonText = document.createTextNode("click me"); button.appendChild(buttonText); document.getElementById('elemId').appendChild(button) document.getElementById("elemId").removeEventListener("click", x); }) 

 <div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div> 

Answer 2

創建函數/處理程序，並在元素創建過程之后使用功能removeEventListener刪除該處理程序。

這種方法創建了一個功能來滿足您的要求，此外，您將能夠恢復該處理程序以再次綁定它。

 document.getElementById('elemId').addEventListener('click', handler); function handler(e) { var button = document.createElement("button"); var buttonText = document.createTextNode("click me"); button.appendChild(buttonText); document.getElementById('elemId').appendChild(button) document.getElementById('elemId').removeEventListener('click', handler); } 

 <div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div> 

Answer 3

您要確保您具有函數處理程序。 由於您沒有刪除適當的事件偵聽器，因此這樣做的方式無效。 您正在使用匿名函數，但需要指向用於刪除事件的實際函數處理程序。

另外，我不確定您要禁用div會做什么。 我刪除了該行，因為您無法禁用div。

我還對代碼進行了一些重構，以使代碼更清晰，更易於閱讀。

 document.getElementById('elemId').addEventListener('click', addButton, false); function addButton() { var button = document.createElement("button"); var buttonText = document.createTextNode("click me"); var clickElement = document.getElementById('elemId'); button.appendChild(buttonText); clickElement.appendChild(button); clickElement.removeEventListener('click', addButton, false); } 

 <div style="background-color: teal; height: 100px; width: 100px; " id="elemId">Count</div>