JS 解决鼠标悬浮显示弹窗 迅速离开时弹窗显示到其他位置的延迟问题

news2025/4/24 18:34:52

解决该问题的思路就是,判断当前鼠标的位置是否在某个div上,如果在这个div上则取消显示悬浮弹窗消息。

首先监听鼠标的移动事件

 鼠标移动时判断是否在div里面进行移动了

clientX表示鼠标X的位置

client Y表示鼠标Y的位置

拿到要判断的div元素 获取offsetLeft(鼠标距离div左侧位置)offsetTop (鼠标距离div上侧位置)

offsetLeft+offsetWidth 表示整个div的宽度

offsetTop+offsetHeight 表示整个div的高度

判断是否在div里面进行相应的将弹窗元素隐藏即可

      window.addEventListener('mousemove', function(event) {
        // 在鼠标移动时执行的代码
        var div = document.getElementById('dragDiv')
        var x=event.clientX
        var y=event.clientY
        var divx1 = div.offsetLeft
        var divy1 = div.offsetTop
        var divx2 = div.offsetLeft + div.offsetWidth
        var divy2 = div.offsetTop + div.offsetHeight
        if( x < divx1 || x > divx2 || y < divy1 || y > divy2) {
          this.popup = true
        } else{
          console.log('在div里面移动'+this.popup)
          this.popup = false
          document.getElementById('tips').style.display = 'none'
        }
      })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/863672.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Uni-App】uview 开发多端应用,密码显示隐藏功能不生效问题

出现的问题&#xff1a; 使用uview组件u-input框密码绑定时会出现右侧密码显隐图标不显示的问题 思路&#xff1a; 1.看了下uview源码&#xff0c;发现这有一段注释&#xff0c;我们需要把源码修改一下&#xff0c;问题出在这里 这行代码修改为 :password"password || …

spring按条件注入@Condition及springboot对其的扩展

概述 spring的ioc极大的方便了日常开发&#xff0c;但随着业务的迭代。配置的一些参数在某些情况下需要按条件注入。 比如原先定义的db公共模块下&#xff0c;相关的配置和工具类只是基于mysql的。但是后续有模块需要使用mongo/es等其他数据库&#xff0c;又想继续使用db公共…

七. 定时器

定时器 1. EPIT定时器(1) 特征&#xff1a;(2) 结构&#xff1a;(3) 工作模式&#xff1a;(4) 寄存器(5) 配置步骤(6) 定时器消抖 2. GPT 定时器(1) 特征(2) 结构(3) 工作模式(4) 寄存器<1> GPTx_CR 配置<2> GPTx_PR 分频<3> GPTx_SR 状态<4> GPTx_CNT…

Vue+SpringBoot后台管理系统:Vue3+TypeScript项目搭建(一)

写在开始:一个搬砖程序员的随缘记录文章目录 一、Node安装二、Vue CLI安装三、相关的版本四、创建Vue3TypeScript项目五、Vue项目初始化六、项目启动 一、Node安装 查看Note版本 node -v查看npm版本 npm -v然后将npm升级至最新版本 npm -g install npm将npm下载源换至http:…

分布式异步任务处理组件(八)

分布式异步任务组件网络通信线程模型设计-- 大概说一下功能场景&#xff1a; 从节点和主节点建立连接&#xff0c;负责和主节点的网络IO通信&#xff0c;通信动作包括投票&#xff0c;心跳&#xff0c;举证等&#xff0c;步骤为读取主节点的信息&#xff0c;写入IO队列中&…

yum 安装本地包 rpm

有时直接yum install 有几个包死活下不下来 根据网址&#xff0c;手动下载&#xff0c;下载后上传至 centos 然后运行 sudo yum localinstall xxx.rpm 即可安装 参考 https://blog.csdn.net/weiguang1017/article/details/52293244

【Nginx】Nginx网站服务

国外主流还是使用apache&#xff1b;国内现在主流是nginx&#xff08;并发能力强&#xff0c;相对稳定&#xff09; nginx&#xff1a;高新能、轻量级的web服务软件 特点&#xff1a; 1.稳定性高&#xff08;没apache稳&#xff09;&#xff1b; 2.系统资源消耗比较低&#xf…

40G光模块在高速网络中的关键角色

40G光模块在高速网络中扮演着关键的角色。它是用于传输数据的光纤通信设备&#xff0c;具备高速数据传输能力&#xff0c;广泛应用于数据中心、电信运营商、企业网络等领域。本文我们来看看40G光模块在高速网络中是如何发挥它的作用的&#xff01; 一、认识40G光模块 为实现4…

vue手写多对多关联图,连线用leader-line

效果如图 鼠标滑动效果 关联性效果 <template ><div class="main" ref="predecessor"><div class="search"><div class="search-item"><div class="search-item-label">部门</div><…

多用户一体化建设跨境电商小程序、app开发

跨境电商是指通过互联网技术&#xff0c;进行国际贸易的电子商务活动。随着跨境电商的快速发展&#xff0c;许多企业开始关注开发跨境电商小程序和app&#xff0c;以扩大其国际业务。下面是多用户一体化建设跨境电商小程序和app的开发步骤。 第一步&#xff1a;需求分析和规划…

tomcat的多实例,动静分离(web服务基础结束)

多实例 多实例就是在一台服务器上有多个tomcat的服务&#xff08;核心是改端口&#xff09; 实验&#xff1a;多实例 安装步骤 1.安装好 jdk 2.安装 tomcat cd /opt tar zxvf apache-tomcat-9.0.16.tar.gz mkdir /usr/local/tomcat mv apache-tomcat-9.0.16 /usr/local/tomca…

IDEA项目实践——Spring集成mybatis、spring当中的事务

系列文章目录 IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介 IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——动态SQL、关系映射、注解开发 IDEA项目实践——Spring框架简介&#xff0c;以及IOC注解 IDEA项目实践—…

python爬虫实战(1)——网站小说

整本小说的爬取保存 目标大致思路页面的爬取解析—XPath请求网页内容解析网页内容正文爬取与解析单个页面数据获取爬取所有页面 数据清洗 经过学习基础&#xff0c;我们学以致用一下子&#xff0c;爬取小说&#xff0c;注意这个小说本身是免费的哦&#xff0c;以后再进阶。 本次…

工作中的方法论总结

1、SMART SMART原则是目标管理的一种方法&#xff0c;通过有效地进行成员的组织与目标的制定和控制以达到更好的工作绩效。大到业务规划&#xff0c;小到个人项目开发计划都比较适用。 SMART的具体含义如下&#xff1a; S&#xff08;Specific&#xff09;&#xff1a;目标是确…

阿里发布财报,电商业务重回增长

KlipC报道&#xff1a;8月10日阿里巴巴集团发布了最新财报&#xff0c;据数据显示该公司一季度营收同比上涨14%&#xff0c;达2341.6亿元人民币&#xff0c;超市场预期。净利润为330亿元较去年同期增长63%达202.98亿元&#xff0c;财报发布后&#xff0c;阿里美股一度涨超5%&am…

动力节点|Spring6框架学习教程,从基础到手撕源码一套打通

Spring框架已广泛应用于诸多Java应用程序的开发中&#xff0c;它提供了很多解决方案及最佳实践&#xff0c;简化了Java应用程序的开发过程并加速了开发。 Spring6.0版本是下一个十年的新开端&#xff0c;动力节点老杜精心打造全新升级版Spring6教程&#xff0c;手把手教学&…

vue插槽slots

一、默认插槽&#xff1a; vue组件能够接收任意类型的 JavaScript 值作为 props&#xff0c;也可以为子组件传递一些模板片段&#xff0c;让子组件在它们的组件中渲染这些片段。 例如&#xff1a;有一个<FancyButton>组件 在父组件中引用 最终渲染出来的dom 插槽内容可…

Live800:客服中心数字化转型的5个关键点,你知道吗?

数字化转型的浪潮中&#xff0c;客服中心也不例外。传统的在线客服中心需要经历数字化转型&#xff0c;才能更好地适应用户需求&#xff0c;提高工作效率以及质量。然而&#xff0c;数字化转型并不仅仅是将传统客服系统搬到数字平台上&#xff0c;还要符合用户习惯和新技术趋势…

三、MySql表的操作

文章目录 一、创建表&#xff08;一&#xff09;语法&#xff1a;&#xff08;二&#xff09;说明&#xff1a; 二、创建表案例&#xff08;一&#xff09;代码&#xff1a;&#xff08;二&#xff09;说明&#xff1a; 三、查看表结构&#xff08;一&#xff09;语法&#xff…

产品经理如何突破职业瓶颈,杀出重围?

随着社会的进步和科技的发展&#xff0c;互联网行业从未停止过发展的脚步。而在这个充满机遇和挑战的赛道上&#xff0c;互联网产品经理的角色显得尤为重要。然而&#xff0c;随着互联网产品经理的数量逐年增加&#xff0c;内卷化现象也日益严重。那么&#xff0c;产品经理应该…