是否可以检测鼠标何时位于浏览器选项卡上？答案

【问题标题】：Is it possible to detect when the mouse is over the browser tab?是否可以检测鼠标何时位于浏览器选项卡上？
【发布时间】：2015-06-27 04:18:08
【问题描述】：

我被分配了一个任务来编写一个脚本，当鼠标光标移到当前打开的浏览器选项卡上时，该脚本将生成一个弹出窗口。

类似这个演示的东西：http://demo.exitmonitor.com/ 但是这里的弹出窗口总是在鼠标离开网页顶部时出现。

当鼠标悬停在当前活动的浏览器选项卡上时，我需要准确地生成此窗口。

是否可以用 javascript 做到这一点？

【问题讨论】：

无法检测和烦人
不可能。您所能做的就是将mouseleave 事件附加到document，这样您就可以知道鼠标何时离开文档，但不知道它离开文档的确切位置。
在某些带有 JS 编写的插件的浏览器中可能是可能的。但是，这样的事情会让人非常愤怒。
也许您可以跟踪鼠标位置，然后查看光标何时超出您想要响应的方式。
@RoryMcCrossan 要获得鼠标离开文档的位置，请使用MouseEvent.clientX 和mouseEvent.clientY：document.addEventListener("mouseleave", function(e) { console.log(e.clientX, e.clientY); })

标签： javascript jquery

【解决方案1】：

使用MouseEvent.clientX 和MouseEvent.clientY 跟踪鼠标在文档上的位置，然后使用absolute 定位将弹出窗口放在那里：

//The popup:
var span = document.createElement("span");
span.style.position = "absolute";
span.textContent = "I'm a popup!";
//When the page loads, the popup will be in the top-left corner
//because we can't know where the mouse is on the page load.
document.body.insertBefore(span, document.body.firstChild);

//The event:
document.addEventListener("mousemove", function(e) {
    //Position the span according to its dimensions and where the mouse is.
    span.style.marginLeft = e.clientX-span.clientWidth/2+"px";
    span.style.marginTop = e.clientY-span.clientHeight/2+"px";
});

【讨论】：

我希望它在鼠标在浏览器选项卡上/内部/上方时弹出
好的，我修复了我的代码以适应这种情况。这样做实际上比跟踪鼠标离开浏览器的位置要容易得多，因为您不需要跟踪它离开了哪一侧。

【解决方案2】：

我假设“标签”是指以红色突出显示的区域：

在所有现代浏览器中，网站无法访问其 window 之外的任何内容，除非明确提供给它的 API。
因此，您甚至无法仅使用 JavaScript 访问标签栏。

是否有办法访问标签栏取决于浏览器，但它（肯定）需要浏览器插件。

例如，在 Chrome 中，这是 not at all possible back in 2010，看起来那里没有任何变化。

然而，在 Firefox 中，插件实际上可以做到这一点。
假设您知道如何将脚本附加到 browser.xul，我将省略 install.rdf、chrome.manifest 和 overlay.xul，所以这里只列出相关的 JavaScript：

(function()
{
    // Wait for the browser to settle
    top.addEventListener('load', function load(event)
    {
        // It only needs to do that once
        top.removeEventListener('load', load);
        // Get notified about every page that loads
        top.gBrowser.addEventListener('DOMContentLoaded', function(event)
        {
            // Get the current tab
            var tab = top.gBrowser.mCurrentTab;
            // Check if we already annoyified it
            if(tab.annoyingOrange === undefined)
            {
                // If not, let's do that!
                tab.annoyingOrange = 'Plumpkin';
                // Add a mouseover event to it
                top.gBrowser.mCurrentTab.addEventListener('mouseover', function(ev)
                {
                    // Since we do that to all tabs, we need to check here if we're still the selected tab
                    if(ev.target == top.gBrowser.mCurrentTab)
                    {
                        // And now we can get onto everybody's nerves!
                        alert('Hey apple!!!');
                    }
                });
            }
        });
    });
})();

在 Windows 上使用 Firefox 37.0.1 测试。

[Download .xpi]（提示：解压源文件）

但如果你的浏览器不支持它，你运气不好，你无能为力！

无论如何，这是一件非常糟糕的事情，它让人们无休止地惹恼了！
这应该永远不会在生产环境甚至测试环境中完成！

【讨论】：

【解决方案3】：

我相信你需要 mouseleave 事件：

<script>
        function addEvent(obj, evt, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(evt, fn, false);
            }
            else if (obj.attachEvent) {
                obj.attachEvent("on" + evt, fn);
            }
        }
        addEvent(window, "load", function (e) {
            addEvent(document, "mouseleave", function (e) {
                e = e ? e : window.event;
                var from = e.relatedTarget || e.toElement;
                if (!from || from.nodeName == "HTML") {

                    //.... do_this
                }
            });
        });
    </script>

【讨论】：

【解决方案4】：

这适用于现代 jquery 版本 1.8.1 + 当用户单击当前窗口上方时，弹出窗口将显示，就好像他们要切换选项卡或执行其他操作一样。它只会弹出一次，因此干扰性较小，而且所有消息都可以自定义，并且风格各异。

 html
 <div id='confirm'>
 <div class='message'></div>
 <button class='yes'>OK</button>
 </div>

 css
 #confirm {display:none; top:50%; left:50%; transform:translate(-50%, -50%); background:#595959; position:fixed; width:650px; height:auto; padding:40px; text-align:center; box-shadow:0px 0px 22px -2px rgba(0,0,0,0.5); z-index:1000;}
 #confirm button {width:100%; height:70px; color:#fff; background:#595959; display:inline-block; border:1px solid #fff; text-align:center; font-size:12pt; letter-spacing:2px; margin-top:40px; bottom:10px; cursor:pointer; opacity:0.5; transition:0.9s;}
 #confirm button:hover {opacity:1;}
 #confirm .message {color:#fff;}

 js
 var mouseX = 0;
 var mouseY = 0;
 var popupCounter = 0;
 document.addEventListener("mousemove", function(e) {
 mouseX = e.clientX;
 mouseY = e.clientY;
 document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
 });
 $(document).mouseleave(function (msg, myYes) {
 if (mouseY < 100) {
 if (popupCounter < 1) {
 msg = "There's something in your basket, are you sure you want to leave?";
 var confirmBox = $("#confirm");
 confirmBox.find(".message").text(msg);
 confirmBox.find(".yes").unbind().click(function() {
 confirmBox.hide();
 });
 confirmBox.find(".yes").click(myYes);
 confirmBox.show();
 }
 popupCounter ++;
 }
 });

https://jsfiddle.net/pgx7c5d4/

【讨论】：