猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何检测鼠标何时离开窗口？

如何检测鼠标何时离开窗口？

我希望能够检测到鼠标何时离开窗口，以便在用户的鼠标位于其他位置时可以阻止事件触发。

有关如何做到这一点的任何想法？


白猪掌柜的
浏览 533回答 3
3回答

胡子哥哥

在html页面上实现拖放行为时，通常需要这种类型的行为。以下解决方案在MS Windows XP计算机上的IE 8.0.6，FireFox 3.6.6，Opera 10.53和Safari 4上进行了测试。首先是Peter-Paul Koch的一个小功能;&nbsp;跨浏览器事件处理程序function&nbsp;addEvent(obj,&nbsp;evt,&nbsp;fn)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(obj.addEventListener)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.addEventListener(evt,&nbsp;fn,&nbsp;false); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(obj.attachEvent)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attachEvent("on"&nbsp;+&nbsp;evt,&nbsp;fn); &nbsp;&nbsp;&nbsp;&nbsp;}}然后使用此方法将事件处理程序附加到文档对象mouseout事件：addEvent(document,&nbsp;"mouseout",&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;e&nbsp;=&nbsp;e&nbsp;?&nbsp;e&nbsp;:&nbsp;window.event; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;from&nbsp;=&nbsp;e.relatedTarget&nbsp;||&nbsp;e.toElement; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!from&nbsp;||&nbsp;from.nodeName&nbsp;==&nbsp;"HTML")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;stop&nbsp;your&nbsp;drag&nbsp;event&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;for&nbsp;now&nbsp;we&nbsp;can&nbsp;just&nbsp;use&nbsp;an&nbsp;alert &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("left&nbsp;window"); &nbsp;&nbsp;&nbsp;&nbsp;}});最后，这是一个html页面，其中嵌入了用于调试的脚本：<html><head><script&nbsp;type="text/javascript">function&nbsp;addEvent(obj,&nbsp;evt,&nbsp;fn)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(obj.addEventListener)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.addEventListener(evt,&nbsp;fn,&nbsp;false); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(obj.attachEvent)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.attachEvent("on"&nbsp;+&nbsp;evt,&nbsp;fn); &nbsp;&nbsp;&nbsp;&nbsp;}}addEvent(window,"load",function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;addEvent(document,&nbsp;"mouseout",&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e&nbsp;=&nbsp;e&nbsp;?&nbsp;e&nbsp;:&nbsp;window.event; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;from&nbsp;=&nbsp;e.relatedTarget&nbsp;||&nbsp;e.toElement; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!from&nbsp;||&nbsp;from.nodeName&nbsp;==&nbsp;"HTML")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;stop&nbsp;your&nbsp;drag&nbsp;event&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;for&nbsp;now&nbsp;we&nbsp;can&nbsp;just&nbsp;use&nbsp;an&nbsp;alert &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("left&nbsp;window"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});});</script></head><body></body></html>
0

繁星coding

这对我有用：addEvent(document,&nbsp;'mouseout',&nbsp;function(evt)&nbsp;{ &nbsp;&nbsp;if&nbsp;(evt.toElement&nbsp;==&nbsp;null&nbsp;&&&nbsp;evt.relatedTarget&nbsp;==&nbsp;null)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;alert("left&nbsp;window"); &nbsp;&nbsp;}});
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript