点击按钮触发Chrome下程序化点击另一按钮的日志重复及首点无输出问题

一、首次点击按钮1无控制台日志的原因 #

代码执行顺序存在错误：

• 按钮1的点击回调中，先执行了document.getElementById('two').click()触发按钮2的点击，之后才给按钮2绑定点击事件监听器
• 首次触发按钮2点击时，对应的监听器还未完成注册，所以不会触发日志输出，只有后续点击时才会执行已经注册完成的监听器。

二、点击日志次数不断累加的原因 #

每次点击按钮1，都会给按钮2新增一个独立的点击事件监听器，之前绑定的监听器不会自动移除。按钮2被点击时，所有已经绑定的监听器都会依次触发，所以点击按钮1的次数越多，按钮2上绑定的监听器数量越多，触发时输出的日志条数也就越多。

三、修复方案 #

只需要把按钮2的点击事件监听器绑定逻辑移到按钮1的点击回调外部，全局仅绑定一次即可，调整后的代码如下：

JS代码 #

let chromeCheck = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
// 提前全局绑定按钮2的点击监听器，仅绑定一次
two.addEventListener('click', function() {
  console.log('Button two was clicked');
})

one.addEventListener('click', function() {
  if (chromeCheck) {
    document.getElementById('two').click();
  } else {
    console.log('Button two was not clicked.')
  }
})

调整说明 #

• 按钮2的监听器在页面加载完成后仅绑定一次，不会重复新增
• 按钮1点击时先判断环境，符合要求直接触发按钮2点击即可，此时监听器已经提前注册完成，首次点击也会正常输出日志，且每次点击仅触发一次日志输出
• 如果你的JS代码放在页面head中，需要把上述代码包裹在DOMContentLoaded事件回调中，避免获取不到DOM元素报错。

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