addEventListener绑定特定first name输入框点击事件不生效问题求助

快速排查验证 #

先打开浏览器开发者工具的控制台，直接执行你写的事件绑定代码，之后点击输入框如果能弹出alert，说明是代码执行时机的问题，参考第一个原因解决即可；如果还是没反应，再往下排查其他原因。

常见原因及解决方法 #

• 原因1：事件绑定代码执行时，#fname 元素还未被加载到DOM中
  如果你的JS代码写在<head>标签里，或者写在#fname元素的HTML代码之前，执行document.getElementById("fname")会返回null，事件自然绑定失败。
  解决方法：要么把JS代码移到页面</body>标签之前执行，要么用DOM加载完成事件包裹绑定逻辑，代码示例：

  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("fname").addEventListener("click", function() {
      alert("Hello World!");  
    });
  })
  

• 原因2：#fname 是页面加载完成后动态生成的元素
  如果这个输入框是异步渲染的（比如后端返回数据后动态插入、前端组件渲染生成），绑定事件时元素还不存在，也会绑定失败。
  解决方法：使用事件委托，把事件绑定到已经存在的父级元素（也可以直接绑定到document），代码示例：

  document.addEventListener('click', function(e) {
    if(e.target.id === 'fname') {
      alert("Hello World!");
    }
  })
  

• 原因3：点击的是label文字而非输入框本身
  你当前的<label>标签没有加for="fname"属性，点击「First Name」文字的时候，选中的是label元素，不会触发输入框的点击事件。
  解决方法：给label添加for属性关联输入框，修改HTML代码如下：

  <label class="_form-label form__floating-label" for="fname">
    First Name
  </label>
  

  添加属性后，点击label文字会自动触发对应输入框的点击事件。
• 原因4：ID重复或元素被遮挡
  先在控制台执行document.getElementById("fname")，查看返回结果是不是你要的输入框元素，如果返回null或者其他元素，说明页面存在ID重复的问题，修改ID保证唯一即可。
  如果能拿到正确元素，再检查是否有其他元素的z-index属性高于输入框，导致点击时命中的是上层元素，调整z-index值保证输入框在上层即可。

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