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('离开页面')
  }
})
相关推荐
郝学胜-神的一滴2 分钟前
Python数据封装与私有属性:保护你的数据安全
linux·服务器·开发语言·python·程序人生
悟能不能悟4 分钟前
Elastic Stack 中两种主要查询语言 KQL (Kibana Query Language) 和 Lucene 的详细对比和解释。
java·开发语言
kirito707710 分钟前
前端项目架构(基于 monorepo)
前端
去哪儿技术沙龙15 分钟前
Qunar酒店搜索排序模型的演进
前端·架构·操作系统
重铸码农荣光16 分钟前
TypeScript:JavaScript 的“防坑装甲”,写代码不再靠玄学!
前端·react.js·typescript
用户6000718191019 分钟前
【翻译】构建类型安全的复合组件
前端
掘金安东尼31 分钟前
向大家介绍《开发者博主联盟》🚀
前端·程序员·github
火车叼位34 分钟前
div滚动条是否存在?用 v-scroll-detect 增加一个辅助class
前端
H_z_q240141 分钟前
web前端(HTML)银行汇款单的制作
前端·html
赛恩斯41 分钟前
kotlin 为什么可以在没有kotlin 环境的安卓系统上运行的
android·开发语言·kotlin