原生JS使用getElementsByClassName绑定点击事件失效无报错如何解决？

• getElementsByClassName 返回的是 HTMLCollection 类数组对象，包含所有匹配类名的DOM元素，不是单个元素，本身没有addEventListener方法，这是和getElementById的核心差异：getElementById只会返回匹配唯一id的单个DOM元素，所以可以直接绑定事件。
• 代码存在逻辑错误：你已经通过var menu1声明了变量，直接访问menu1即可，不需要加document.前缀，document对象上默认不存在menu1属性，取值为undefined。
• 没有抛出错误大概率是代码执行时目标DOM还未渲染完成，或者浏览器控制台开启了错误过滤，正常情况下给undefined调用addEventListener会抛出类型错误。

场景1：给所有匹配类名的元素绑定点击事件 #

遍历返回的HTMLCollection集合，给每个元素单独绑定事件：

var menuList = document.getElementsByClassName("dropdown-menu");
for (var i = 0; i < menuList.length; i++) {
  menuList[i].addEventListener('click', function(event) {
    alert("click outside");
    event.stopPropagation();
  });
}

场景2：只给第一个匹配类名的元素绑定点击事件 #

直接取集合的第一个元素即可：

var menu1 = document.getElementsByClassName("dropdown-menu")[0];
menu1.addEventListener('click', function(event) {
  alert("click outside");
  event.stopPropagation();
});

你也可以用更简洁的querySelector直接获取单个匹配类名的元素，和getElementById用法一致：

var menu1 = document.querySelector(".dropdown-menu");

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