有没有办法确定导致输入失去焦点的元素，从而触发更改事件？

Question

我基本上想知道用户是否单击了按钮，这就是导致

input

失去焦点的原因，从而触发

change

事件，或者是否由于单击其他地方或取消等等

对于上下文，我有一个具有自动保存功能的表单，该功能由

change

事件触发。问题是，如果他们单击

Save

按钮，它会自动保存，但我不希望它这样做。我可以通过多种方法来防止这种情况，但理想的方法是，如果在单击

change

按钮时触发

Save

事件，则不要自动保存。

在这种情况下，

e.originalEvent

是

undefined

，所以这没有帮助！

jsfiddle

document.getElementById("text").addEventListener("change", function(e) {
    document.getElementById("results").innerHTML = "I want to know if this event handler was called because the user clicked on Button 1 or not"
});

#results {
  margin-top:10px;
}

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

</div>

Answer 1

可能不是最优雅的答案，但一种方法是使用变量跟踪按钮单击，然后在

change

事件侦听器中使用它。添加一个小的超时将确保首先处理按钮单击变量。这是一个例子：

let button = false

document.getElementById("button1").addEventListener("click", (e) => {
  button = true
});

document.getElementById("text").addEventListener("change", (e) => {
  setTimeout(() => {
    console.log(button ? "It was button" : "It was not the button")
    
    button = false
  }, 100)
});

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