javascript - 有没有办法知道 "blur"是被 "element.blur()"调用还是 "actual"模糊？

Question

所以，我有一个简单的问题，实际上我已经把它写在标题中了。 :) 但我会再重复一次，只是为了完全清楚。问题是:

有没有办法知道“blur”是由“element.blur()”调用的还是“实际的”模糊？我所说的“实际”是指单击某个随机区域以使输入失去焦点，或者单击 TAB。 :)

Answer 1

当然。您应该将模糊事件附加到您想要的特定元素。

一个例子是:

<input id="myInput" type="text" />

function handleBlur(event){
  console.log(event.target); // outputs: <input id="myInput" type="text">
}

document.getElementById('myInput').addEventListener('blur', handleBlur);

仅当该输入发生模糊事件时才会调用此函数。不过，您可以使用 event.target 来查看触发模糊事件的元素。

编辑:仅在 Chrome 上进行了测试，但以下内容实现了您的要求。

<input id="myInput" type="text" />

function handleBlur(event){
    if(event.sourceCapabilities !== null){
    console.log('blur by user');
  }
  else{
    console.log('blur programmatically')
  }
}

var elem = document.getElementById('myInput');
elem.addEventListener('blur', handleBlur);

elem.focus();
elem.blur();

在线尝试 jsfiddle .

由于每个浏览器处理事件的方式不同，我的建议是触发不同的自定义事件来处理这种情况。