是否有可能检测鼠标何时位于浏览器选项卡上？

Question

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

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

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

这是可能做到这一点与JavaScript？

Answer 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"; 
 
});

Answer 2

我想通过“标签”你的意思是以红色突出显示的区域：

在所有现代浏览器中，除明确提供给它的API外，网站无法访问window以外的任何内容。
因此，您甚至无法使用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]（普罗蒂普：解压缩源）

但是如果你的浏览器不支持它，你的运气并没有什么可以做！

---

无论如何，这是一个非常糟糕的事情做，它苦恼的人没有结束！
这应该是从来没有，永远不会在生产或甚至测试版环境中完成！

Answer 3

我相信你需要鼠标离开事件：

<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>