Question

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

有没有办法知道＆＃34;模糊＆＃34;由＆＃34; element.blur（）＆＃34;或者如果它是＆＃34;实际＆＃34;模糊？通过说＆＃34;实际＆＃34;我的意思是，单击一些随机区域使输入失去焦点，或单击TAB。：）

Answer 1

ooooo有2种不同类型的模糊，其中一种是jQuery用户称为模糊或onBlur的事件，用于“失焦”。基本上用户点击它然后点击其他地方。这就是布鲁尔。另一个是模糊过滤器属性的CSS过滤器值。

原来如此！可以通过几种方法查看元素是否“失焦”。一个是这样的：

var blur = true;//we start off not focused 

element.addEventListener('blur', function() {
    blur = true;
});

element.addEventListener('focus', function() {
    blur = false;
});

所以基本上上面就是＆＃34;如果它没有聚焦我们是模糊的，如果我们失去焦点，我们会模糊＆＃34;。（感觉我让这个更难理解？）。尝试在控制台中使用element.blur()和element.focus()，看看会发生什么！

另一种方法是检查活动元素（聚焦元素）不是你的元素。

document.getActiveElement.id !== element.

在jQuery中，您可以在选择器中使用:focus道具$('element:focus')，这样:checked也可以方便地获取已选中的单选按钮$('input[type="radio"]:checked')

不幸的是，虽然我不认为有办法查看是否有其他标签点击了。可能有一种方法，但根据我的经验，我之前已经制作了一个JS时钟，我添加到标题中，它显示为标签的名称。当标签没有打开时它没有更新，所以我认为当页面不在焦点时可能会有更多的伏都教来运行你的JS

Answer 2

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

一个例子是：

<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上在线试用。

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

有没有办法知道＆＃34;模糊＆＃34;由＆＃34; element.blur（）＆＃34;或者如果它是＆＃34;实际＆＃34;模糊？

2 个答案: