events js - JavaScript / jQuery:測試窗口是否有焦點





html element (4)


HTML:

<button id="clear">clear log</button>
<div id="event"></div>​

使用Javascript:

$(function(){

    $hasFocus = false;

    $('#clear').bind('click', function() { $('#event').empty(); });

    $(window)
        .bind('focus', function(ev){
            $hasFocus = true;
            $('#event').append('<div>'+(new Date()).getTime()+' focus</div>');
        })
        .bind('blur', function(ev){
            $hasFocus = false;
            $('#event').append('<div>'+(new Date()).getTime()+' blur</div>');
        })
        .trigger('focus');

    setInterval(function() {
        $('#event').append('<div>'+(new Date()).getTime()+' has focus '+($hasFocus ? 'yes' : 'no')+'</div>');
    }, 1000);
});​

test

更新:

我會解決它,但IE瀏覽器不能很好地工作

測試更新

你如何測試瀏覽器是否有焦點?




我沒有在其他瀏覽器中測試過,但它似乎可以在Webkit中使用。 我會讓你試試IE。 :O)

試試看: http://jsfiddle.net/ScKbk/ : http://jsfiddle.net/ScKbk/

單擊開始間隔後,更改瀏覽器窗口的焦點以查看結果更改。 再次,僅在Webkit中進行測​​試。

var window_focus;

$(window).focus(function() {
    window_focus = true;
}).blur(function() {
    window_focus = false;
});

$(document).one('click', function() {
    setInterval(function() {
        $('body').append('has focus? ' + window_focus + '<br>');
    }, 1000);
});​



使用文檔的hasFocus方法。 你可以在這裡找到詳細的描述和例子: hasFocus方法

編輯:添加小提琴http://jsfiddle.net/Msjyv/3/

HTML

Currently <b id="status">without</b> focus...

JS

function check()
{
    if(document.hasFocus() == lastFocusStatus) return;

    lastFocusStatus = !lastFocusStatus;
    statusEl.innerText = lastFocusStatus ? 'with' : 'without';
}

window.statusEl = document.getElementById('status');
window.lastFocusStatus = document.hasFocus();

check();
setInterval(check, 200);



"use strict"使JavaScript代碼以嚴格模式運行,這基本上意味著在使用之前需要定義所有內容。使用嚴格模式的主要原因是為了避免未定義方法的意外全局使用。

在嚴格模式下,事情運行得更快,一些警告或靜默警告會導致致命錯誤,最好總是使用它來製作更整潔的代碼。

"use strict"在ECMA5中廣泛需要使用在ECMA6中它默認是JavaScript的一部分,所以如果你使用ES6則不需要添加它。

查看來自MDN的這些陳述和示例:

“use strict”指令
“use strict”指令是JavaScript 1.8.5(ECMAScript第5版)中的新指令。它不是一個語句,而是一個文字表達式,被早期版本的JavaScript忽略。“use strict”的目的是表明代碼應該以“嚴格模式”執行。使用嚴格模式,您不能使用未聲明的變量。

使用“use strict”的例子:
函數的嚴格模式:同樣,要為函數調用嚴格模式,請輸入確切的語句“use strict”; (或'use strict';)在任何其他語句之前在函數體中。

1)功能嚴格模式

 function strict() {
     // Function-level strict mode syntax
     'use strict';
     function nested() { return 'And so am I!'; }
     return "Hi!  I'm a strict mode function!  " + nested();
 }
 function notStrict() { return "I'm not strict."; }

 console.log(strict(), notStrict());

2)全腳本嚴格模式

'use strict';
var v = "Hi! I'm a strict mode script!";
console.log(v);

3)分配給不可寫的全局

'use strict';

// Assignment to a non-writable global
var undefined = 5; // throws a TypeError
var Infinity = 5; // throws a TypeError

// Assignment to a non-writable property
var obj1 = {};
Object.defineProperty(obj1, 'x', { value: 42, writable: false });
obj1.x = 9; // throws a TypeError

// Assignment to a getter-only property
var obj2 = { get x() { return 17; } };
obj2.x = 5; // throws a TypeError

// Assignment to a new property on a non-extensible object.
var fixed = {};
Object.preventExtensions(fixed);
fixed.newProp = 'ohai'; // throws a TypeError

您可以在MDN上閱讀更多內容







javascript jquery events