单页面中多个window.onclick事件无法同时生效的解决方法咨询

嘿，这个问题我太熟了！你目前遇到的情况，本质是直接给window.onclick赋值时，新的函数会完全覆盖掉之前的函数——就像你把一个变量重新赋值，旧的值自然就被丢弃了。要让两个事件都生效，有几种简单的方案：

方案一：使用标准的addEventListener（推荐） #

这是W3C制定的标准事件绑定方式，支持给同一个事件添加多个处理函数，它们会按照绑定的顺序依次执行。代码示例：

// 第一个点击事件
window.addEventListener('click', function(event) {
  alert("abc");
});

// 第二个点击事件
window.addEventListener('click', function(event) {
  console.log("abc");
});

这个方法的优势很明显：

• 现代浏览器全支持（包括Edge、Chrome、Firefox等）
• 可以通过第三个参数控制事件的捕获/冒泡阶段（默认是冒泡）
• 还能通过removeEventListener单独移除某个处理函数，灵活性拉满

方案二：兼容旧IE的attachEvent（仅特殊场景使用） #

如果你需要兼容IE8及以下的古老浏览器，可以用attachEvent（注意事件名要加on前缀）：

// 仅兼容IE8及以下
window.attachEvent('onclick', function(event) {
  alert("abc");
});

window.attachEvent('onclick', function(event) {
  console.log("abc");
});

不过现在这个场景几乎不存在了，除非你的项目必须支持超级旧的浏览器，否则优先用方案一。

方案三：手动合并原有事件处理函数 #

如果你不想用事件监听API，也可以手动保存之前的onclick函数，在新函数里先调用旧的，再执行新逻辑：

// 保存第一个赋值前的原有onclick（如果有的话）
const originalOnClick = window.onclick;
window.onclick = function(event) {
  // 先执行原来的处理逻辑
  if (originalOnClick) {
    originalOnClick(event);
  }
  // 再执行当前的alert逻辑
  alert("abc");
};

// 给第二个事件做同样的操作
const secondOriginalOnClick = window.onclick;
window.onclick = function(event) {
  if (secondOriginalOnClick) {
    secondOriginalOnClick(event);
  }
  console.log("abc");
};

这个方法比较繁琐，而且每次添加新事件都要手动处理，不如addEventListener省心，所以只作为备选思路。

内容的提问来源于stack exchange，提问作者Võ Minh