简单代码中on.click事件不触发，addEventListener正常运行，求排查原因

嘿，这个问题我之前也碰到过，其实核心原因出在你那个<a>标签的默认跳转行为上：

• 你的<a href="" id="bar">里，href=""意味着点击后浏览器会自动执行页面刷新/跳转操作。
• 当你用onclick绑定事件时，如果没明确阻止这个默认行为，浏览器会先跑你的onclick代码（可能刚执行到一半），就立刻刷新页面——你的操作（比如菜单切换）还没来得及生效就被覆盖了，看起来就像事件没触发一样。
• 而你用addEventListener时，应该是在事件处理函数里加了e.preventDefault()（说不定你自己都没特意注意到），这个方法会直接阻止a标签的默认跳转，所以你的事件逻辑能完整跑完。

给你两个简单的解决方案： #

方案1：在onclick里阻止默认行为 #

修改你的onclick代码，加上阻止默认事件的逻辑：

document.getElementById('bar').onclick = function(e) {
  // 这里放你的业务逻辑，比如切换菜单显示
  document.getElementById('menu').classList.toggle('active');
  // 阻止a标签的默认跳转行为
  e.preventDefault();
  // 也可以用return false（同时阻止默认行为和事件冒泡）
  // return false;
};

方案2：修改a标签的href属性 #

如果这个a标签本来就不需要跳转功能，直接把href改成href="javascript:void(0)"（比#更友好，不会跳转到页面顶部）：

<a href="javascript:void(0)" id="bar" type="button"><i class="fas fa-bars"></i></a>

这样不管用onclick还是addEventListener，事件都能正常触发并执行你的逻辑啦。

内容的提问来源于stack exchange，提问作者am guru prasath