页面焦点问题

我想实现一个功能：当页面获得焦点时，执行一个操作，当页面失去焦点时，执行另一个操作。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
  <center><br><br><br><br>
<div id="aaa"></div>
  </center>
</body>
<script>window.onload = function(){
window.focus();
window.onblur = function(){//失去焦点
document.getElementById('aaa').innerHTML +=2;
}

window.onfocus = function(){
document.getElementById('aaa').innerHTML +=1;
}
}
</script>
</html>但是无论是失去焦点还是获得焦点时，onblur与onfocus都执行了，请问高手怎么解决

解决方案 »

  1.   

    改为这样！window.onload = function(){
        //window.focus();注释了这一句！
        window.onblur = function(){//失去焦点
            document.getElementById('aaa').innerHTML +=2;
        }
        
        window.onfocus = function(){
            document.getElementById('aaa').innerHTML +=1;
        }
    }
      

  2.   

    我想问问你是怎么再测试的啊，如果你是两个页面切换的话，那么肯定是先blur再focus。
    如果你只是鼠标点击页面外，再点击进来的话你可以看看这个步骤，是一步一步执行的。
      

  3.   

    你可以直接在body上添加onfocus和onblur事件。因为你这两个事件其实是添加在了页面document上了，如果你是用alert弹出来提示，当你去点击这个提示框的时候也是属于onblur,同样，你从外面进来点击你的提示框同样也是属于了onfocus