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('离开页面')
  }
})
相关推荐
kyle~几秒前
C++---向上取整
开发语言·c++
QX_hao7 分钟前
【Go】--扩容机制
开发语言·golang
weixin_307779139 分钟前
Clickhouse导出库的表、视图、用户和角色定义的SQL语句
开发语言·数据库·算法·clickhouse·自动化
golang学习记11 分钟前
从0死磕全栈之Next.js 字体优化实战:零布局偏移、高性能、隐私友好的字体加载方案
前端
zachhere16 分钟前
深入了解 OpenAI Apps SDK 的内部机制
前端
张可爱19 分钟前
20251015-Vue3八股文整理
前端
ruanCat20 分钟前
记一次因 vue-router 升级而导致的 uniapp 故障
前端·vue.js
Damon小智20 分钟前
基于 Rokid JSAR 打造精致的 3D 白色飞机模型
前端·虚拟现实
流星白龙21 分钟前
【Qt】7.信号和槽_connect函数用法(1)
开发语言·数据库·qt