当click()方法由其他元素触发时，如何区分实际触发的元素？

下面提供几种可行的实现方式，帮你在按钮2的点击处理函数里判断触发来源：

方法一：使用自定义事件传递触发标识 #

修改按钮1的触发逻辑，通过自定义事件携带触发源信息，替代原生的click()调用：

<div>
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
</div>

// 按钮2的事件处理函数
document.getElementById('btn2').addEventListener('click', function(event) {
  // 优先取自定义事件携带的标识，没有则用目标元素ID
  const triggerSource = event.detail?.triggerSource || event.target.id;
  
  if (triggerSource === 'btn1') {
    alert('由按钮1触发');
  } else if (triggerSource === 'btn2') {
    alert('由按钮2本身触发');
  }
});

// 按钮1的点击逻辑
document.getElementById('btn1').onclick = function() {
  const customClickEvent = new CustomEvent('click', {
    detail: { triggerSource: 'btn1' },
    bubbles: true,
    cancelable: true
  });
  document.getElementById('btn2').dispatchEvent(customClickEvent);
};

方法二：临时标记触发源 #

在按钮1触发按钮2点击前，给按钮2添加临时标识，事件处理完成后移除：

<div>
  <button id="btn1" onclick="triggerBtn2FromBtn1()">Button 1</button>
  <button id="btn2">Button 2</button>
</div>

const btn2 = document.getElementById('btn2');

btn2.onclick = function() {
  if (this.dataset.triggeredBy === 'btn1') {
    alert('由按钮1触发');
    delete this.dataset.triggeredBy;
  } else {
    alert('由按钮2本身触发');
  }
};

function triggerBtn2FromBtn1() {
  btn2.dataset.triggeredBy = 'btn1';
  btn2.click();
}

方法三：抽离共享处理函数 #

把按钮2的逻辑抽成独立函数，按钮1直接调用该函数并传入触发标识：

<div>
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
</div>

function handleBtn2Action(triggerSource) {
  if (triggerSource === 'btn1') {
    alert('由按钮1触发');
  } else if (triggerSource === 'btn2') {
    alert('由按钮2本身触发');
  }
}

// 按钮2绑定点击事件
document.getElementById('btn2').onclick = function() {
  handleBtn2Action('btn2');
};

// 按钮1点击时直接调用处理函数
document.getElementById('btn1').onclick = function() {
  handleBtn2Action('btn1');
};

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