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('离开页面')
  }
})
相关推荐
凯瑟琳.奥古斯特11 分钟前
动态调优IoU提升OCR文本合并精度
开发语言·python·算法
陌陌龙12 分钟前
【紧急预警!PHP 核弹级漏洞 php2shell】
开发语言·php
白露与泡影22 分钟前
一线 Java 后端面试八股(2026 更新版,含完整答案)
java·开发语言·面试
企业解惑小能手-域智盾系统24 分钟前
内网监控软件策略不生效、日志缺失?一套从现象到根因的排查框架
开发语言·php·域智盾
1024奇点29 分钟前
【仓颉语言入门 · 第二篇 第 10 课】
开发语言·数据库·ide·mysql·开源
布莱克60533 分钟前
A* 算法详解:从原理到实现
开发语言·c++·算法
多弗朗皮卡丘34 分钟前
C++ 智能指针
开发语言·c++·c++11·智能指针
数据狐(Datafox)36 分钟前
一文读懂京东商品详情API:返回字段解读与 JSON 样例
java·开发语言·数据库·windows·json
CoovallyAIHub1 小时前
用 AI 做 PPT 被辞退,法院判公司赔:员工贴进对话框的数据,到底谁负责?
前端·agent
小成202303202651 小时前
C++~02运算符重载
开发语言·c++