Window 焦點和模糊事件在 Android 瀏覽器上無法正常工作

Question

我發現當附加到 window、文檔或正文時，Javascript 焦點和模糊事件在 Android 瀏覽器上無法正確觸發。

我編寫了一個簡單的測試腳本，它在桌面瀏覽器上正常工作，但在 Android 股票瀏覽器、Dolphin 和 Opera 移動設備上失敗：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Focus test</title>

    <script type="text/javascript">

        window.onfocus = function() {
            document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
        };
        window.onblur = function() {
            document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
        };

    </script>
</head>

<body>
    <input id="test" name="test" />
    <div id="console"></div>
</body>

</html>

有趣的是，如果表單輸入獲得焦點，事件處理程序會觸發，並且在模糊時，模糊事件處理程序會觸發兩次。

有沒有人有一個好的解決方案或解決方法？

編輯：預期的結果是，如果我更改瀏覽器選項卡或更改為另一個應用程序，模糊事件應該觸發，如果我 go 回到瀏覽器選項卡，焦點事件應該觸發（這就是它在桌面上的工作方式)

Answer 1

我剛剛在運行 jellybean 的 Galaxy Nexus 上測試了您的代碼（我所擁有的），並且該代碼運行良好，並且兩個事件僅觸發一次。

document.getElementById('test').onfocus = function() {
    document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
};
document.getElementById('test').onblur = function() {
    document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
};

可能是您的目標是在大多數移動設備上通常不能“模糊”本身的窗口。 確保你直接要求元素報告它自己的模糊和焦點事件。

編輯：另外，請確保在應用事件偵聽器之前等待 DOM 准備好。

Answer 2

我相信輪詢文檔的焦點狀態可能正是您想要的。 每 500 毫秒輪詢一次並不昂貴，並且會給你你需要的東西。 如果您想要文檔焦點更改幾乎立即發出警報，您可以嘗試 100 毫秒之類的時間。

let prevStateIsFocused = null // used to ensure that there is only one execution of a function for either the document focused or not

setInterval(() => {
    if(document.hasFocus()){
        if(prevStateIsFocused !== true){
            console.log('window is focused')
            // execute some function here ...
        }
        prevStateIsFocused = true
    }else{
        if(prevStateIsFocused !== false){
            console.log('window has lost focused, blurred')
            // execute some function here ...
        }
        prevStateIsFocused = false
    }
}, 500)

演示： https://jsfiddle.net/sanjaydookhoo/1h7gncaf/

Window 焦點和模糊事件在 Android 瀏覽器上無法正常工作

問題描述

2 個解決方案

解決方案1
0 2012-10-04 20:58:24

解決方案2
0 2022-08-29 23:57:44

Window 焦點和模糊事件在 Android 瀏覽器上無法正常工作

問題描述

2 個解決方案

解決方案1 0 2012-10-04 20:58:24

解決方案2 0 2022-08-29 23:57:44

解決方案1
0 2012-10-04 20:58:24

解決方案2
0 2022-08-29 23:57:44