12

私は読んだばかりで、この主題を扱っているすべてのスレッドだと思いますが、私の問題に対する本当の解決策を見つけることができません. ブラウザー ウィンドウがフォーカスを失ったとき、つまりぼかしイベントを検出する必要があります。stackoverflow ですべてのスクリプトを試しましたが、適切なクロスブラウザー アプローチはないようです。

Firefox は、ここで問題のあるブラウザーです。

jQuery を使用した一般的なアプローチは次のとおりです。

window.onblur = function() { 
   console.log('blur'); 
}
//Or the jQuery equivalent:
jQuery(window).blur(function(){
    console.log('blur');
});

これは Chrome、IE、および Opera で機能しますが、Firefox はイベントを検出しません。

ウィンドウのぼかしイベントを検出する適切なクロスブラウザーの方法はありますか? または、別の質問として、Firefox ブラウザーでウィンドウ ブラー イベントを検出する方法はありますか?

関連する質問と調査:

4

6 に答える 6

7

私は両方を試しました：

document.addEventListener('blur', function(){console.log('blur')});

と

window.addEventListener('blur', function(){console.log('blur')});

どちらも私のバージョンの FF (33.1) で動作しました。

これがjsfiddleです：http://jsfiddle.net/hzdd06eh/

「実行」ウィンドウの内側をクリックしてから、その外側をクリックして効果をトリガーします。

于 2015-05-20T20:05:19.380 に答える
2

jQuery は、FireFox のこれらのテストをサポートしなくなったようです。

Firefox のぼかしイベントをサポートするためのより良い方法を探していますが、より良い方法が見つかるまで、これは元の受け入れられた回答に比べてより最新の状態です。

于 2015-05-15T00:16:51.967 に答える
2

( MDNdocument.hasFocus )は Firefox の問題を解決できる実装ですが、Opera ではサポートされていません。したがって、組み合わせたアプローチにより、直面している問題に到達できます。

以下の関数は、このメソッドの使用例を示しています。

function getDocumentFocus() {
    return document.hasFocus();
}

あなたの質問はアプリケーション (時間指定、pub/sub システム、イベント駆動型など) について十分に明確ではないため、上記の関数をいくつかの方法で使用できます。

たとえば、時限検証は、このフィドル ( JSFiddle ) に実装されているものと似ています。

于 2015-05-18T02:38:48.683 に答える
1

次のように、ウィンドウでjQueryのblurメソッドを使用できます。

$(document).ready(function() {
  $(window).blur(function() {
    // Put your blur logic here
    alert("blur!");
  });
});

これはFirefox、IE、Chrome、Operaで動作します。

于 2013-02-01T13:37:45.337 に答える
1

これはあなたの質問に対する代替ソリューションですが、Page Visibility APIを使用しており、ソリューションはクロスブラウザ互換です。

(function() {
    var hidden = "hidden";

    // Standards:
    if (hidden in document)
        document.addEventListener("visibilitychange", onchange);
    else if ((hidden = "mozHidden") in document)
        document.addEventListener("mozvisibilitychange", onchange);
    else if ((hidden = "webkitHidden") in document)
        document.addEventListener("webkitvisibilitychange", onchange);
    else if ((hidden = "msHidden") in document)
        document.addEventListener("msvisibilitychange", onchange);
    // IE 9 and lower:
    else if ("onfocusin" in document)
        document.onfocusin = document.onfocusout = onchange;
    // All others:
    else
        window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;

    function onchange(evt) {
        var v = "visible",
            h = "hidden",
            evtMap = {
                focus: v,
                focusin: v,
                pageshow: v,
                blur: h,
                focusout: h,
                pagehide: h
            };

        evt = evt || window.event;
        if (evt.type in evtMap) {
            console.log(evtMap[evt.type]);
        } else {

            console.log(this[hidden] ? "hidden" : "visible");
        }
    }

    // set the initial state (but only if browser supports the Page Visibility API)
    if (document[hidden] !== undefined)
        onchange({
            type: document[hidden] ? "blur" : "focus"
        });
})();
于 2015-05-21T19:56:59.663 に答える