onfocusout / onfocusin不工作

Question

我刚刚了解了onfocusout和onfocusin，但这些函数似乎不起作用。我在火狐和chrome上都试过了。根本没有控制台消息，即使我有焦点和松开它。我做错了什么？

​

window.addEventListener
(
  "onfocusout",
  function()
  {
    console.log("page lost focus");
  }
);

window.addEventListener
(
  "onfocusin",
  function()
  {
    console.log("page has focus");
  }
);

<h1>Test</h1>

​

Answer 1

对于addEventListener，您不能在事件名称中使用"on“

​

function example(evt) {
    console.log(evt.type, event.target.id);  
}

window.addEventListener("focusin", example);
window.addEventListener("focusout", example);

<input type="text" id="foo" />
<input type="text" id="bar" />

​

如果您想知道页面状态，那么您需要查看不同的事件：pageshow和pagehide

Answer 2

我已经做了一些关于这方面的研究。当你实际选择一个文本字段时，你只能获得“焦点”。来源：w3schools

那么，当您最小化屏幕时，您正在寻找的是让控制台记录一些东西？或者选择另一个窗口？如果是这样，我找到了一篇关于这个here的帖子

Answer 3

只需使用下面的代码片段，它更容易阅读，但与事件处理程序的功能相同:-)

$(function(){
  $('.yourfocuselement').focus(function(){
      //The code for element focus goes here
    })
    $('.yourfocuselement').blur(function(){
      //The code for element lose focus goes here
    })
})

另外，我可能不知道您对此代码的完整要求，但我不明白为什么您需要为页面焦点添加一个侦听器……