使用JavaScript获取选中元素ID仅首次点击生效的问题如何解决

问题原因 #

• document.querySelector 仅返回匹配选择器的第一个DOM元素，你的代码仅给第一个<li>（ID为AZ的选项）绑定了点击事件，其余两个选项没有绑定任何监听逻辑，点击自然不会生效。
• 即使给所有元素绑定了事件，现有写法固定传递的mst是第一个元素的引用，点击其他元素也只会打印第一个元素的ID，不符合需求。

修复方案 #

方案1：逐个绑定所有元素的点击事件 #

适合元素数量少、不会动态新增列表项的场景：

<ul id="cntyByState" class="dropdown-menu" aria-labelledby="dropState">
       <li id="AZ" class="dropdown-item">Arizona</li>
       <li id="NM" class="dropdown-item">New Mexico</li>
       <li id="TX" class="dropdown-item">Texas</li>
 </ul>

// 获取所有匹配的列表项
const allItems = document.querySelectorAll("#cntyByState li.dropdown-item")
// 遍历绑定事件
allItems.forEach(item => {
  item.onclick = function() {
    // this指代当前被点击的元素
    getCnts(this)
  }
})
   
function getCnts(em) {
  console.log(em.id)
}

方案2：使用事件委托（更推荐） #

直接给父容器绑定监听，不需要逐个给子元素绑定，性能更优，且支持后续动态新增的列表项：

// 给父容器绑定点击事件
document.querySelector("#cntyByState").onclick = function(e) {
  // 校验点击目标是否是列表项
  if(e.target.classList.contains('dropdown-item')) {
    getCnts(e.target)
  }
}

function getCnts(em) {
  console.log(em.id)
}

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