jq/js检测鼠标指针移动离开页面

通过 mouseout 鼠标事件,判断鼠标去往哪个元素

知识点:relatedTarget 事件属性


定义和用法

relatedTarget 事件属性返回与事件的目标节点相关的节点。

对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。

对于其他类型的事件来说,这个属性没有用。

jq

javascript 复制代码
$(document).on('mouseout',function(e){
        if (!e) var e= window.event
        var to = e.relatedTarget || e.toElement
        if (!to || to.nodeName == "HTML") {
            console.log("离开窗口");
        }
    })

js

javascript 复制代码
document.body.addEventListener('mouseout', (e) => {
  if (!e) var e= window.event
  var to = e.relatedTarget || e.toElement
  if (!to || to.nodeName == "HTML") {
    console.log('离开页面')
  }
})
相关推荐
ZC跨境爬虫2 小时前
跟着 MDN 学 HTML day_33:(Attr 接口与属性节点的深入理解)
前端·javascript·ui·html·音视频·html5
skywalk81632 小时前
Trae生成的中文编程语言关键字(如“定“、“函“、“印“等)需要和标识符之间用 空格 隔开,以确保正确识别
服务器·开发语言·编程
神所夸赞的夏天2 小时前
如何获取多层json数据,存成dictionary,并取最大最小值
java·前端·json
红色的小鳄鱼2 小时前
前端面试js手写
开发语言·前端·javascript
焦糖玛奇朵婷2 小时前
健身房预约小程序开发、设计
java·大数据·服务器·前端·小程序
海盗12342 小时前
C#中的IEqualityComparer<T>使用
开发语言·c#
上海云盾王帅2 小时前
WEB业务如何接入安全防护:从零到一的实战指南
前端·安全
用户059540174462 小时前
AI Agent记忆丢失踩坑实录:这个问题让我排查了3天
前端·css
江公望2 小时前
Qt QSharedPointer用法,10分钟讲清楚
开发语言·qt
web行路人2 小时前
前端对Commands(斜杠命令)一些常用
前端·javascript·vue.js·vue