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('离开页面')
  }
})
相关推荐
ujainu小24 分钟前
原生性能优化:6变量实现高效桥接
开发语言·华为·性能优化·harmonyos
李明卫杭州30 分钟前
Vue2 portal-target 组件与 Vue3 的针对性优化
前端·javascript·vue.js
甄同学30 分钟前
第十七篇:Bash Executor命令执行器,安全运行Shell命令
开发语言·安全·bash
张32331 分钟前
Go语言基础 Map 函数值 闭包
开发语言·golang
杜子不疼.1 小时前
【C++ 在线五子棋对战】- 会话管理模块实现
开发语言·c++
有点。1 小时前
C++深度优先搜索(DFS)的概念(一)
开发语言·c++·深度优先
时间的拾荒人1 小时前
C语言编译与链接:从源码到可执行程序的完整解析
c语言·开发语言
人道领域1 小时前
【0-1的agent进阶篇】Prompt 与上下文工程
java·开发语言·prompt·mcp
aaPIXa6221 小时前
C++大型项目模块化拆分实战记录
开发语言·c++
z落落1 小时前
C# WinForm 线程池与事件等待+进度条暂停恢复实战案例
开发语言·c#