如何在JavaScript中点击div一次后禁用其自身点击，保留内部元素可点击？

你遇到的问题其实很常见，我来帮你拆解一下为什么原来的代码没效果，再给你两个可行的方案：

为什么原代码失效？ #

• removeEventListener 无效：因为你传入的是全新的匿名函数，和之前绑定的不是同一个引用，浏览器找不到要移除的事件监听。
• disabled = true 无效：disabled 属性只对表单元素（比如button、input这类）生效，div元素不支持这个属性，所以设置了也没用。

方案1：用标志位控制按钮创建（最简单） #

我们可以加一个变量来记录按钮是否已经被创建，每次点击div时先判断这个标志，只有没创建过才执行创建逻辑，之后把标志设为true，后续点击就不会重复执行了。

修改后的JavaScript代码：

// 定义一个标志位，初始为false，表示按钮还没创建
let isButtonCreated = false;
const elem = document.getElementById('elemId');

elem.addEventListener('click', function(e) {
  // 如果按钮已经创建，直接返回，不执行后续逻辑
  if (isButtonCreated) return;

  // 创建按钮的逻辑
  const button = document.createElement("button");
  button.textContent = "click me";
  // 给按钮加个点击事件，测试是否能正常触发
  button.addEventListener('click', function() {
    alert('按钮被点击啦！');
  });
  elem.appendChild(button);

  // 标记按钮已创建
  isButtonCreated = true;
});

方案2：移除事件监听（需要命名函数） #

如果一定要用移除监听的方式，得把事件处理函数抽成命名函数，这样removeEventListener才能找到对应的引用。另外，要注意点击按钮时不要触发div的事件逻辑，这里可以通过判断事件目标来区分：

修改后的JavaScript代码：

const elem = document.getElementById('elemId');

// 把事件处理函数抽成命名函数
function handleDivClick(e) {
  // 如果点击的是按钮（或者按钮内部元素），直接返回，不执行创建逻辑
  if (e.target.tagName === 'BUTTON') return;

  // 创建按钮
  const button = document.createElement("button");
  button.textContent = "click me";
  button.addEventListener('click', function() {
    alert('按钮被点击啦！');
  });
  elem.appendChild(button);

  // 移除div的点击事件监听，注意这里要传入同一个函数引用
  elem.removeEventListener('click', handleDivClick);
}

// 绑定事件监听
elem.addEventListener('click', handleDivClick);

两种方案都能实现你的需求：按钮只被追加一次，后续点击div不会再创建按钮，同时按钮的点击事件完全不受影响。你可以根据自己的习惯选择其中一种~

内容的提问来源于stack exchange，提问作者Deke