javascript - 检测浏览器选项卡/窗口何时处于事件状态

标签 javascript jquery

<分区>

是否可以检测浏览器窗口何时处于事件/非事件状态

我试过:

$(window).on('focus', function(){
    console.log(1);
});
$(window).on('blur', function(){    
    console.log(2);    
});

但它似乎只有在用户单击窗口时才有效。 但是当用户点击例如时显示 2。浏览器地址栏。

我想要实现的是检测当前选项卡何时处于事件状态。

如何改进这段代码?

最佳答案

事件意味着选项卡可见。但是如果你想知道用户的鼠标是否直接在页面上,你可以使用这个:

<html onmouseenter="document.getElementById('h1').innerHTML = 'active'"onmouseleave="document.getElementById('h1').innerHTML = 'not active'">
  <body style="width:100%;height:100px">
    <h1 id="h1">not active</h1>
  </body>
</html>
使用上面的简单代码,您可以判断用户鼠标是否在页面上

编辑:使用页面可见性 API:

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} 
else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} 
else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} 
else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

function handleVisibilityChange() {
    if (document[hidden]) {
        //Not visible, Do whatever
    }
    else {
        //Visible
    }
}

if (typeof document.addEventListener === "undefined" ||
    typeof document[hidden] === "undefined") {
    alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} 
else {
    document.addEventListener(visibilityChange, handleVisibilityChange, false);

关于javascript - 检测浏览器选项卡/窗口何时处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26451769/

相关文章:

javascript - 如何使用 mysql 提供的日期获取 "time ago"?

javascript - 如何使用 jQuery 的 grep() 函数过滤动态输入

javascript - 样式化或替换标准选择元素

javascript - History.js 如何防止双击返回重新加载的页面?

javascript - 鼠标悬停时显示 GridView 列名称的定义

javascript - 如何获取子元素的 id/

javascript - 使用 bootstrap 创建模态表单 (HTML)

javascript - 如何使用 javascript 对 firebase getDownloadURL() 结果进行排序?

javascript - AJAX 按钮未提交且未通过

jquery - 同一页面上的多个模态