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('离开页面')
  }
})
相关推荐
繁星蓝雨3 分钟前
C++的设计与演进大纲(如何从C语言一步步成长为C++)
c语言·开发语言·c++·c++历史·c++演进
Evand J18 分钟前
【MATLAB例程,图像降噪滤波9】自适应维纳滑动窗口滤波(Wiener)图像降噪、方法对比,有中文注释
开发语言·图像处理·计算机视觉·matlab·滑动窗口·滤波·降噪
杜大哥40 分钟前
python程序:如何查看电脑【电池电量的剩余百分比】 和 【是否插入连接着充电器】?
开发语言·python
wuyk55540 分钟前
Python网络爬虫入门到实战 第01章:爬虫到底是什么?原理、流程、合法性、风险全解析(零基础必看)
开发语言·爬虫·python
yurenpai(27届找实习中)1 小时前
Java 10 的 var 为什么不能随便用?从订单汇总看懂类型推断与泛型陷阱
java·开发语言·java18
shmily麻瓜小菜鸡1 小时前
JS/TS 易踩坑知识点 — 模块化与工程化类
开发语言·javascript·ecmascript
geovindu1 小时前
CSharp: Observer Pattern
开发语言·后端·观察者模式·设计模式·c#·.netcore·行为模式
萧鼎1 小时前
Python 高性能Web框架神器 FastAPI:自动生成API文、基于Pydant、异步请求处理全搞定
前端·python·fastapi
郝学胜-神的一滴2 小时前
C++11 工程级应用 09:告别无谓拷贝,解锁高性能移动语义
开发语言·数据结构·c++·vscode·软件工程·visual studio
IT_陈寒2 小时前
Redis误用keys命令把生产环境搞崩了,血的教训
前端·人工智能·后端