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('离开页面')
  }
})
相关推荐
神之王楠6 分钟前
如何通过js加载css和html
javascript·css·html
余生H11 分钟前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍14 分钟前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai18 分钟前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
弱冠少年21 分钟前
websockets库使用(基于Python)
开发语言·python·numpy
长天一色22 分钟前
C语言日志类库 zlog 使用指南(第五章 配置文件)
c语言·开发语言
流烟默30 分钟前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
一般清意味……34 分钟前
快速上手C语言【上】(非常详细!!!)
c语言·开发语言
卑微求AC34 分钟前
(C语言贪吃蛇)16.贪吃蛇食物位置随机(完结撒花)
linux·c语言·开发语言·嵌入式·c语言贪吃蛇
2401_8572979140 分钟前
招联金融2025校招内推
java·前端·算法·金融·求职招聘