如何在javascript中只单击一次就禁用div，而不禁用其中元素的click事件？

我正在尝试在elemId div内的单击上创建一个按钮。但希望只追加一次按钮，然后仅在div上禁用单击事件，而不在button元素上禁用

 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:

---

你可以给你的函数命名任何你想要的名字，在这个例子中我把它命名为“x”，然后当你想删除click事件监听器时引用它

document.getElementById'elemId'。addEventListener'click'， 函数xe{ var button=document.createElementbutton； var buttonText=document.createTextNodeclick me； button.appendChildbuttonText； document.getElementById'elemId'.appendChildbutton document.getElementByIdelemId.removeEventListenerclick，x； }

---

Count您可以将函数命名为任何您想要的名称，在本例中我将其命名为“x”，然后在您想要删除click事件侦听器时引用它

document.getElementById'elemId'。addEventListener'click'， 函数xe{ var button=document.createElementbutton； var buttonText=document.createTextNodeclick me； button.appendChildbuttonText； document.getElementById'elemId'.appendChildbutton document.getElementByIdelemId.removeEventListenerclick，x； }

---

Count创建函数/处理程序，并在元素创建过程之后使用函数删除该处理程序

这种方法创建一个函数来完成您的需求，而且，您将能够恢复该处理程序以再次绑定它

getElementById'elemId'。addEventListener'click'，处理程序； 功能手柄{ var button=document.createElementbutton； var buttonText=document.createTextNodeclick me； button.appendChildbuttonText； document.getElementById'elemId'.appendChildbutton getElementById'elemId'。移除EventListener'click'，处理程序； }

---

Count创建函数/处理程序，并在元素创建过程之后使用函数删除该处理程序

这种方法创建一个函数来完成您的需求，而且，您将能够恢复该处理程序以再次绑定它

getElementById'elemId'。addEventListener'click'，处理程序； 功能手柄{ var button=document.createElementbutton； var buttonText=document.createTextNodeclick me； button.appendChildbuttonText； document.getElementById'elemId'.appendChildbutton getElementById'elemId'。移除EventListener'click'，处理程序； }

---

Count您希望确保有一个函数处理程序。您这样做不起作用，因为您没有删除适当的事件侦听器。您使用的是匿名函数，但需要指向用于删除事件的实际函数处理程序

另外，我不确定禁用div时您想做什么。我删除了该行，因为您无法禁用div

我还进行了一些重构，使代码更清晰、更易于阅读

document.getElementById'elemId'。addEventListener'click'，addButton，false； 功能添加按钮{ var button=document.createElementbutton； var buttonText=document.createTextNodeclick me； var clickElement=document.getElementById'elemId'； button.appendChildbuttonText； 单击Element.AppendChild按钮； clickElement.removeEventListener'click'，addButton，false； }

---

Count您希望确保有一个函数处理程序。您这样做不起作用，因为您没有删除适当的事件侦听器。您使用的是匿名函数，但需要指向用于删除事件的实际函数处理程序

另外，我不确定禁用div时您想做什么。我删除了该行，因为您无法禁用div

我还进行了一些重构，使代码更清晰、更易于阅读

document.getElementById'elemId'。addEventListener'click'，addButton，false； 功能添加按钮{ var button=document.createElementbutton； var buttonText=document.createTextNodeclick me； var clickElement=document.getElementById'elemId'； button.appendChildbuttonText； 单击Element.AppendChild按钮； clickElement.removeEventListener'click'，addButton，false； }

---

我喜欢所有的答案，喜欢所有的答案。

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