如何仅在元素存在时添加EventListener并防止重复点击

问题根源在于当目标元素download_mp3j_0不存在时，document.getElementById()会返回null，直接调用addEventListener()会触发JS错误。同时需要确保doSomething函数仅在元素存在时执行逻辑，以下是修改后的代码及说明：

修改后的完整代码 #

// (A) ATTACH CLICK LISTENER ON PAGE LOAD
window.addEventListener("load", () => {
  const downloadBtn = document.getElementById("download_mp3j_0");
  // 仅当元素存在时绑定点击事件
  if (downloadBtn) {
    downloadBtn.addEventListener("click", doSomething);
  }
});

// (B) 仅在元素存在时执行逻辑的函数
function doSomething () {
  // 用this直接获取当前点击的元素，避免重复DOM查询
  const div = this;
  // 保险判断：若元素已被移除则终止执行
  if (!div) return;

  // (B1) 移除点击监听，避免重复触发
  div.removeEventListener("click", doSomething);
  // (B2) 修改按钮文本
  div.innerHTML = "Downloading";
  // (B3) 执行下载逻辑
  alert("Downloading!");
  // (B4) 如需重新启用点击监听，取消注释下方代码
  // div.addEventListener("click", doSomething);
}

关键改动说明 #

• 绑定事件前的存在性校验：页面加载完成后先获取元素，通过if (downloadBtn)判断元素是否存在，仅在存在时才绑定事件，彻底避免null调用方法的错误。
• 优化元素获取方式：在doSomething函数中用this指代当前点击的元素，无需重复调用document.getElementById()，既提升性能，也避免因元素动态移除导致的查询失败。
• 函数内的保险判断：增加if (!div) return的判断，处理极端情况下元素在点击后、函数执行前被移除的场景，进一步避免错误。

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