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('离开页面')
  }
})
相关推荐
Java小白笔记6 分钟前
Java中大数据实时归集与指标汇总方案
java·大数据·开发语言
随遇而安zx8 分钟前
【地基篇】---Java 8 JVM 知识大纲
java·开发语言·jvm
Coodor10 分钟前
在前端如何转换IC卡卡号格式
前端·javascript·nfc·卡号格式
软件黑马王子17 分钟前
4.单例模式问题2:重复挂载
开发语言·单例模式·c#
invicinble17 分钟前
数字系统--c端数字环境入口和操作系统
前端
quantdash_cc19 分钟前
批量请求和循环请求有什么区别?从 API 请求次数看量化数据获取的工程设计
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
hunterandroid20 分钟前
[鸿蒙从零到一] relationalStore 高级实战:事务、版本迁移与数据库加密
前端
百慕大三角24 分钟前
给 SPA 加页面切换动画:View Transitions API 从入门到实战
前端·javascript
qq_4069810325 分钟前
大白话rust系列01注释
开发语言·rust
橘子编程25 分钟前
Java邮件发送全攻略:从入门到实战
java·开发语言·spring boot·spring·spring cloud·maven