使用JS或jQuery点击一元素时触发另一元素点击的问题求解

错误原因 #

• document.getElementsByClassName() 返回的是包含所有匹配类名元素的HTMLCollection类数组集合，而非单个DOM元素，只有集合内的单个DOM元素才支持click()触发方法，直接对集合调用该方法不会生效。

修正方案 #

最小改动适配原有代码 #

如果你确认页面中只有1个类名为myElement2的元素，只需从返回的集合中取出第一个元素调用点击方法即可：

function myFunction() {
  document.getElementsByClassName('myElement2')[0].click();
}

更稳妥的兼容写法 #

增加元素存在性判断，避免元素未加载/不存在时控制台报错：

function myFunction() {
  const targetEle = document.getElementsByClassName('myElement2')[0];
  if (targetEle) {
    targetEle.click();
  }
}

也可以用更简洁的querySelector直接匹配单个元素，搭配可选链运算符简化判断逻辑：

function myFunction() {
  document.querySelector('.myElement2')?.click();
}

推荐的优化实践 #

不推荐使用行内onclick绑定事件，你可以去掉HTML中的onclick属性，用事件监听的方式实现，耦合度更低也更易维护：

<div class="myElement"></div>
<a href="https://example.com" class="myElement2"></a>

document.querySelector('.myElement').addEventListener('click', () => {
  document.querySelector('.myElement2')?.click();
});

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