如何判断触发input失焦及change事件的元素？

要解决点击Save按钮导致input失焦触发自动保存的问题，核心思路是提前标记按钮的点击状态，在change事件中根据这个状态判断是否跳过自动保存。下面是两种可靠的实现方式：

方法一：追踪最近点击的元素 #

通过全局监听click事件记录点击目标，在change事件里校验是否是Save按钮：

// 记录最近一次点击的元素
let lastClicked = null;
document.addEventListener('click', e => {
  lastClicked = e.target;
});

const input = document.getElementById("text");
const saveBtn = document.getElementById("button1");
const results = document.getElementById("results");

input.addEventListener("change", function() {
  // 检查点击目标是否是Save按钮或其内部元素
  if (lastClicked === saveBtn || saveBtn.contains(lastClicked)) {
    results.innerHTML = "由点击Button 1触发，跳过自动保存";
    return;
  }
  // 其他情况执行自动保存逻辑
  results.innerHTML = "其他操作触发，执行自动保存";
  // autoSave();
});

方法二：标记按钮的mousedown状态 #

利用事件触发顺序（mousedown → input blur/change → click），在按钮的mousedown事件中标记状态，精准度更高：

let isSaveBtnClicked = false;
const saveBtn = document.getElementById("button1");
const input = document.getElementById("text");
const results = document.getElementById("results");

// 按钮按下时标记状态
saveBtn.addEventListener('mousedown', () => {
  isSaveBtnClicked = true;
});

// 鼠标松开后重置状态（用setTimeout确保在change事件处理后执行）
document.addEventListener('mouseup', () => {
  setTimeout(() => { isSaveBtnClicked = false; }, 0);
});

input.addEventListener("change", function() {
  if (isSaveBtnClicked) {
    results.innerHTML = "由点击Button 1触发，跳过自动保存";
    isSaveBtnClicked = false; // 立即重置，避免影响后续操作
    return;
  }
  // 执行自动保存
  results.innerHTML = "执行自动保存";
  // autoSave();
});

完整示例代码 #

<div><input id="text"></div>
<hr>
<button id="button1">Button 1</button>
<div id="results"></div>

<style>
#results {
  margin-top:10px;
}
</style>

<script>
let isSaveBtnClicked = false;
const saveBtn = document.getElementById("button1");
const input = document.getElementById("text");
const results = document.getElementById("results");

saveBtn.addEventListener('mousedown', () => {
  isSaveBtnClicked = true;
});

document.addEventListener('mouseup', () => {
  setTimeout(() => { isSaveBtnClicked = false; }, 0);
});

input.addEventListener("change", function() {
  if (isSaveBtnClicked) {
    results.innerHTML = "由点击Button 1触发，跳过自动保存";
    isSaveBtnClicked = false;
    return;
  }
  results.innerHTML = "执行自动保存";
});
</script>

两种方法都能精准区分change事件的触发来源，避免点击Save按钮时触发重复自动保存。方法二更可靠，因为它直接绑定按钮的按下事件，不会受其他点击操作干扰。

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