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('离开页面')
  }
})
相关推荐
无羡仙几秒前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
自动化小秋葵7 分钟前
Python入门经典题目
开发语言·python
编程岁月44 分钟前
java面试-0305-java线程调度方法?sleep()和wait()区别?
java·开发语言·面试
柯腾啊44 分钟前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇1 小时前
ts 定义重复对象字段
前端
凌晨一点的秃头猪1 小时前
Python 常见 bug 总结和异常处理
开发语言·python·bug
云知谷1 小时前
【经典书籍】C++ Primer 第19章特殊工具与技术精华讲解
c语言·开发语言·c++·软件工程·团队开发
HashTang2 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
liu****2 小时前
4.基础开发工具(一)
linux·开发语言·1024程序员节
文火冰糖的硅基工坊2 小时前
[人工智能-大模型-72]:模型层技术 - 模型训练六大步:①数据预处理 - 基本功能与对应的基本组成函数
开发语言·人工智能·python