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('离开页面')
  }
})
相关推荐
用户938515635071 分钟前
Next.js 笔记系统(二):Redis 数据服务与侧边栏组件拆分实战
javascript·全栈
WWJA王文举2 分钟前
I²C通信完整流程详解:START、地址、ACK、数据、Repeated START和STOP一次讲透
c语言·开发语言
zhanghaha131444 分钟前
Python进阶教程:6_JSON 数据解析 —— 新手完全指南
开发语言·python·json
圣殿骑士-Khtangc1 小时前
Go字符串高效拼接性能对比与底层原理分析
服务器·前端·golang
qq_448011162 小时前
C语言中的动态内存分配
c语言·开发语言·php
BigTopOne2 小时前
【ijkplayer】 硬解码流程
前端
kyriewen3 小时前
DeepSeek Harness开源第一天我就上手了——和Claude Code的差距比想象中大
前端·ai编程·deepseek
汉字萌萌哒3 小时前
2024CSP-J入门级C++真题详解
开发语言·c++
arbboter3 小时前
【网络工具】NetProxy网络代理用户手册
开发语言·网络·c#·网络代理·网络异常·代理工具
捡田螺的小男孩3 小时前
什么是 Skill?手把手带你写一个简单有用的 Skill!
前端·后端·程序员