JavaScript下拉菜单点击箭头误触发选择问题求助

直接将监听的click事件替换为change事件即可解决问题：

修改事件监听代码 #

document.getElementById("requesterList").addEventListener("change", getreq);

（可选）优化处理函数 #

可以通过事件对象直接获取选中值，无需重复查询DOM：

function getreq(e) {
  console.log(e.target.value);
}

原因说明 #

• click事件会在点击<select>控件的任意区域（包括下拉箭头、控件本身）时触发，哪怕只是展开下拉菜单未选择新选项，也会执行函数，还可能意外选中第一个选项。
• change事件仅在用户实际选中了不同的选项时才会触发，完全符合你“仅点击实际菜单项时触发函数”的需求。

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