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('离开页面')
  }
})
相关推荐
To_OC21 分钟前
从一头雾水到跑通全流程:我用一个周末啃透了JWT登录鉴权
前端·后端·http
2601_9628857222 分钟前
如何用 Python 自动识别股票的支撑位与压力位?
开发语言·python
爱吃奥利奥_wen39 分钟前
面向对象三板斧:封装、继承、多态,到底在“装“什么、“承“什么、“变“什么?
开发语言·经验分享·c#
我可能是个假开发1 小时前
FTP Unicode 文件名导致 `550` 的问题分析与解决方案
java·开发语言·spring
WL学习笔记2 小时前
日期类(C++)
开发语言·c++·日期类实现
excel2 小时前
研究 Vue 3 源码的收获
前端·vue.js
谢亮_vipxieliang3 小时前
Go map与结构体的正确使用
开发语言·golang·哈希算法
H.莓飛3 小时前
【C++】命名空间、缺省参数、函数重载与引用
linux·开发语言·c++·visual studio
xxwl5853 小时前
数据结构知识点和代码实现总结(C语言实现)
c语言·开发语言·数据结构
可乐鸡翅yeah_4 小时前
业务中 M3U8 水印相关坑,硬水印和动态水印区别
前端·网络·数据库·ffmpeg·m3u8在线