鼠标离开浏览器窗口时的Javascript事件
我想在鼠标离开浏览器窗口时运行一些Javascript代码。我只需要支持Safari（WebKit） 我试着在窗户上放一个鼠标器。当鼠标离开浏览器窗口时，会可靠地调用该处理程序。但由于冒泡，当鼠标在文档中的元素之间移动时也会调用它。我不知道如何确定鼠标何时离开窗口，何时只在元素之间移动 当鼠标离开窗口时，只会生成一个事件，并且目标元素似乎就是鼠标实际经过的元素。因此，检查目标元素是否为window或document不起作用。将整个页面包装在一个不可见的包含div中也不起作用：如果div是不可见的，那么鼠标将永远不会在它上面，所以没有任何变化 （如果我将处理程序放在document或document.body上，也会发生同样的情况，只是当鼠标进入或离开窗口的空白部分时，document.body没有获得mouseover/mouseout事件，例如通过绝对定位底部为0的元素创建的空白垂直空间。对于该空间，document和window将et mouseover/mouseout事件，目标为，但document.body不会。） 我有一些想法：鼠标离开浏览器窗口时的Javascript事件,javascript,ajax,safari,prototypejs,mouseout,Javascript,Ajax,Safari,Prototypejs,Mouseout,我想在鼠标离开浏览器窗口时运行一些Javascript代码。我只需要支持Safari（WebKit） 我试着在窗户上放一个鼠标器。当鼠标离开浏览器窗口时，会可靠地调用该处理程序。但由于冒泡，当鼠标在文档中的元素之间移动时也会调用它。我不知道如何确定鼠标何时离开窗口，何时只在元素之间移动 当鼠标离开窗口时，只会生成一个事件，并且目标元素似乎就是鼠标实际经过的元素。因此，检查目标元素是否为window或document不起作用。将整个页面包装在一个不可见的包含div中也不起作用：如果div是不可见的
- 在每次mouseout事件中，获取鼠标的实际位置，看看它是否确实在窗口上方。但我不知道这是否真的可行，而且听起来要消除所有的竞争条件是很困难的
- 还可以注册一个mouseover处理程序，并检测mouseover没有执行mouseout（或紧接着执行mouseover）的情况。但这需要一个计时器
感谢您的建议！您可以在窗口上使用事件，而不是只使用javascript，不使用原型或jquery等
<html>
<head>
<script type="text/javascript">
var mouseX = 0;
var mouseY = 0;
var counter = 0;
var mouseIsIn = true;
function wireEvent() {
window.addEventListener("mouseout",
function(e){
mouseX = e.pageX;
mouseY = e.pageY;
if ((mouseY >= 0 && mouseY <= window.innerHeight)
&& (mouseX >= 0 && mouseX <= window.innerWidth))
return;
//do something for mouse out
counter++;
mouseIsIn = false;
document.getElementById('in_out').innerHTML='out' + counter;
},
false);
window.addEventListener("mouseover",
function(e){
if(mouseIsIn)
return;
//do something for mouse over
counter++;
mouseIsIn = true;
document.getElementById('in_out').innerHTML='in' + counter;
},
false);
}
</script>
</head>
<body onload="wireEvent();">
<div id="in_out"> </div>
<div style="width:300px; height: 200px; background: red;">Dummy element</div>
</body>
</html>
var-mouseX=0；
var-mouseY=0；
var计数器=0；
var mouseIsIn=true；
函数wirelevent（）{
window.addEventListener（“mouseout”，
职能（e）{
mouseX=e.pageX；
mouseY=e.pageY；
如果（（mouseY>=0&&mouseY=0&&mouseX也许您可以为mouseover和mouseout文档
、正文
或包装整个文档的其他元素设置侦听器，并将其（通过保存发生的情况）用作触发器，以确定它是否是窗口上的有效mouseout
否则，您的第一个想法（关于职位检查）应该可以很好地工作。任何事件都会沿着事件发生的X/Y方向传递。如果超出窗口的高度/宽度，则离开实际窗口。如果为负，则离开窗口。如果正好是高度/宽度，或者正好是顶部：0或左侧：0，则离开窗口。您的问题来自mo为窗口内的元素生成的useout事件，然后如中所述弹出。您可以检查事件实际触发的元素：
function mouseoutFunction(event) {
event = event || window.event;
var sender = event.srcElement || event.target;
}
摘要：这可以通过在mouseout事件期间检查relatedTarget属性来完成。如果relatedTarget不是文档的子对象，那么鼠标就离开了窗口。自己做很容易，但如果不想做，一些库（Mootools，future Prototype…）已经嵌入了功能，而其他库则是（当前的原型）有可用的扩展。在IE上，您可以使用mouseleave，它是mouseout的非冒泡版本
详情：
IE有称为mouseenter和mouseleave的事件，它们是mouseover和mouseout的非冒泡版本。其他浏览器没有，但如果有，在窗口或文档上设置mouseleave侦听器就可以了
一位名叫肯·斯奈德的绅士前来救援：
在鼠标悬停时，相关目标
属性从中引用节点
指针来了，在鼠标上，
relatedTarget属性引用
指针指向的节点。打开
任何事件，作用域都是要执行的节点
事件的附件。当
relatedTarget不是
currentTarget，鼠标悬停事件为
相当于鼠标指针事件和
mouseout事件相当于
鼠标移动事件
--
这使得在其他浏览器中实现mouseenter和mouseleave成为可能。事实上，Ken提供了相同的原型代码：
Duroth在评论中指出，MooTools已经包含了类似的功能。（感谢Duroth。）听起来，即将发布的原型版本（1.6.2）可能包含此功能，但我找不到任何明确的内容。这是我基于计时器的解决方案。这里的计时器基本上用于为其他事件处理程序提供机会（特别是onmouseover）在决定mosue是否在窗口外之前执行。1毫秒的超时（实际上大约33毫秒，有一个最小的计时器分辨率）为鼠标悬停提供了一点时间，如果它还没有出现的话
var inWin=0;
window.onmouseout = function(e)
{
inWin--;
setTimeout(checkIfOut, 1);
}
window.onmouseover = function(e)
{
inWin++;
}
function checkIfOut()
{
if(!inWin)
{
//Yay! Mouse is out of the window (probably)
}
}
当鼠标离开任何元素（包括窗口）时，窗口对象将触发mouseout
事件，并将事件
对象与其一起传递
事件对象中的一个项目称为toElement
，它是鼠标离开旧项目时刚输入的元素的指针。但是当鼠标离开窗口时，没有这样的toElement
，因此此项目变为null
通过在mouseout
事件上测试此项是否为null
，可以判断鼠标是否离开了窗口。以下是代码：
window.onmouseout=function(event){
if(event.toElement===null) console.log('the mouse left the window');
}
这实际上就是我所尝试的（很抱歉，这不清楚。我编辑了这个问题来澄清。）我如何区分鼠标离开窗口的情况和鼠标仅在元素之间移动，并且处理程序正在运行的情况