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('离开页面')
  }
})
相关推荐
依托偶尔宁几秒前
element-plus:el-table设置展开图标所在列的位置
前端·elementui
拂拉氏2 分钟前
【项目分享-知识讲解】 C++标准库 list类的模拟实现
开发语言·c++·list·封装·stl标准库
小小龙学IT2 分钟前
Go语言后端开发实战指南:构建高性能云原生服务
前端·云原生·golang
码云骑士2 分钟前
【2.Java基础】Java常量与变量-从基本类型到类型转换全面掌握
java·开发语言
爱和冰阔落4 分钟前
Ollama 本地大模型部署实战:从安装到 RAG 知识库完整指南
开发语言·大模型·php·ollama
泡^泡4 分钟前
Python数据类型与运算符
开发语言·windows·python
不爱编程的小陈5 分钟前
Go语言GMP调度模型深度解析:高并发背后的精妙设计
开发语言·后端·golang
李子琪。6 分钟前
谷歌“三剑客”与云计算基石:GFS、MapReduce、Bigtable 全栈解析及私有云落地实践
开发语言·编辑器·perl
xufengzhu1 小时前
Python库PyMySQL的使用指南
开发语言·python·pip
sbjdhjd8 小时前
Redis 主从复制、哨兵高可用与 Cluster 集群部署实验手册
运维·前端·redis·云原生·开源·bootstrap·html