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('离开页面')
  }
})
相关推荐
本山德彪1 分钟前
我做了一个拼豆图纸生成器,把照片秒变图纸
前端
一只大袋鼠4 分钟前
Java进阶:CGLIB动态代理解析
java·开发语言
秦ぅ时5 分钟前
保姆级教程|OpenAI tts-1-hd模型调用全流程(Python+curl+懒人用法)
开发语言·python
Eiceblue13 分钟前
使用 C# 将 Excel 转换为 Markdown 表格(含批量转换示例)
开发语言·c#·excel
爱滑雪的码农19 分钟前
Java基础十三:Java中的继承、重写(Override)与重载(Overload)详解
java·开发语言
Java面试题总结20 分钟前
使用 Python 设置 Excel 数据验证
开发语言·python·excel
【 】42322 分钟前
C++&STL(Standard Template Library,标准模板库)
java·开发语言·c++
DTrader27 分钟前
用TS无法实盘量化? - 实盘均线策略
前端·api
eastyuxiao29 分钟前
OpenClaw 自动处理核心逻辑
开发语言·人工智能
小郑加油29 分钟前
python学习Day10天:列表进阶 + 内置函数 + 代码简化
开发语言·python·学习