JavaScript实现点击.button1自动触发同容器内.button2点击事件

问题场景 #

有多个结构一致的div容器，每个容器内包含.button1和.button2两个锚点元素，需求是点击.button1时，自动触发其所在容器内对应.button2的点击事件。

原HTML结构 #

<div>
  <a href="#" class="button1">Button 1a</a>
  <a href="#" class="button2">Button 2a</a>
</div>
<div>
  <a href="#" class="button1">Button 1b</a>
  <a href="#" class="button2">Button 2b</a>
</div>
<div>
  <a href="#" class="button1">Button 1c</a>
  <a href="#" class="button2">Button 2c</a>
</div>

原JavaScript代码（存在错误） #

const btn = document.querySelectorAll('.button1')

btn.forEach(function(btn) {
    btn.addEventListener("click", function() {
         console.log(this.innerText)
       this.closest('.button2').click()
    });
});

错误原因 #

closest()方法的作用是查找当前元素的最近祖先元素，但.button2是和.button1同级的兄弟元素，并非祖先，所以用这个方法无法定位到目标按钮，自然无法触发点击事件。

修正后的代码 #

const btn = document.querySelectorAll('.button1')

btn.forEach(function(btn) {
    btn.addEventListener("click", function(e) {
        e.preventDefault(); // 阻止a标签默认跳转行为，按需添加
        console.log(this.innerText)
        // 先找到当前按钮所在的父容器，再在容器内查找.button2
        this.closest('div').querySelector('.button2').click();
    });
});

说明 #

1. 先通过closest('div')定位到.button1所在的父容器，确保范围限定在当前容器内
2. 再用querySelector('.button2')在父容器中找到目标按钮，最后触发click()事件
3. 添加e.preventDefault()可以阻止a标签默认的跳转行为，避免页面滚动到顶部，根据实际需求选择是否保留

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