Microsoft Edge中JavaScript click()方法无法触发的问题求助

问题描述 #

页面加载时通过以下代码触发元素点击事件：

JavaScript代码：

window.onload = function () {
  var click = document.querySelector('li[data-filter=".architecture"]');
  console.log(click)
  if (click) {
    click.click()
  }
}

HTML代码：

<li data-filter=".architecture" onclick="alert('clicked')">Item</li>

代码在Chrome中运行正常，但在**Microsoft Edge 124.0.2478.67（64位官方版本）**中click()方法无效果。所有浏览器中console.log都能输出目标元素，且无报错信息。

解决方案 #

1. 使用dispatchEvent触发标准点击事件 #

手动创建并分发鼠标点击事件，兼容性更强：

window.onload = function () {
  var target = document.querySelector('li[data-filter=".architecture"]');
  console.log(target);
  if (target) {
    const clickEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
    });
    target.dispatchEvent(clickEvent);
  }
}

2. 直接调用元素的onclick回调 #

如果元素明确绑定了onclick属性，可直接执行该回调函数：

window.onload = function () {
  var target = document.querySelector('li[data-filter=".architecture"]');
  console.log(target);
  if (target && target.onclick) {
    target.onclick();
  }
}

3. 改用DOMContentLoaded事件触发 #

DOMContentLoaded在DOM构建完成后立即执行，无需等待资源加载完成，可能解决加载时机问题：

document.addEventListener('DOMContentLoaded', function() {
  var target = document.querySelector('li[data-filter=".architecture"]');
  console.log(target);
  if (target) {
    target.click();
  }
});

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