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('离开页面')
  }
})
相关推荐
d111111111d几秒前
C语言中,malloc和free是什么,在STM32中使用限制是什么,该如何使用?
c语言·开发语言·笔记·stm32·单片机·嵌入式硬件·学习
网安_秋刀鱼3 分钟前
【java安全】shiro鉴权绕过
java·开发语言·安全
白昼流星!10 分钟前
C++内存四区与new操作符详解
开发语言·c++
tyatyatya11 分钟前
MATLAB三维绘图教程:plot3/mesh/surf/contour函数详解与实例
开发语言·matlab
十五年专注C++开发12 分钟前
标准C++操作文件方法总结
开发语言·c++·文件操作·ifstream
广州华水科技13 分钟前
单北斗GNSS在大坝形变监测中的应用与性能分析
前端
浔川python社19 分钟前
《C++ 小程序编写系列》(第四部):实战:简易图书管理系统(类与对象篇)
java·开发语言·apache
等风来不如迎风去19 分钟前
【web】页面透明、插入图片
前端
谢尔登22 分钟前
a 标签的跳转机制
前端·javascript·webpack·node.js
浔川python社22 分钟前
《C++ 小程序编写系列》(第五部):实战:多角色图书管理系统(继承与多态篇)
开发语言·c++