JavaScript移除div点击事件方法

<div id="box" onclick="doSmt(var1, bar2)">点击我</div>

不能通过 removeEventListener("click", doSmt) 来移除该事件 —— 因为 removeEventListener 仅对通过 addEventListener() 动态绑定的事件监听器生效；而内联 onclick 是作为 HTML 属性存在的，本质上等价于为 element.onclick 赋值一个匿名函数（如 element.onclick = function() { doSmt(var1, bar2); }），且该函数无法被外部直接引用。

✅ 正确做法是：直接移除 onclick 属性本身：

if (condition) {
  const box = document.getElementById('box');
  box.removeAttribute('onclick');
}

此方法简洁、兼容性好（支持所有现代浏览器及 IE9+），且能彻底清除内联事件绑定。

⚠️ 注意事项：

• removeAttribute("onclick") 不会影响后续通过 addEventListener 添加的其他监听器；

• 若需保留逻辑复用性，建议统一改用 addEventListener 方式绑定事件（推荐工程化实践）：

  // 绑定时
  document.getElementById('box').addEventListener('click', () => doSmt(var1, bar2));
  
  // 移除时（需保存 handler 引用）
  const handler = () => doSmt(var1, bar2);
  element.addEventListener('click', handler);
  // … later
  element.removeEventListener('click', handler);

• 内联事件（如 onclick="..."）会污染 HTML 结构、降低可维护性，应尽量避免在生产环境中使用。

总结：对于已存在的内联 onclick，removeAttribute('onclick') 是最直接可靠的移除方式；长期来看，推荐采用「行为与结构分离」原则，用 addEventListener 管理事件逻辑。

本篇关于《JavaScript移除div点击事件方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！