vue 使用鼠标移入移出事件发生冒泡事件阻止冒泡不生效的解决方法

2023-11-01

今天是非常忙碌又很坑的一天啦 又踩了一个坑
按需求写了一个鼠标移入出现价格 详情的盒子 鼠标移出消失的方法
使用mouseout和mouseover 但是这时候就发生了冒泡事件
父级元素绑定定mouseout和mouseover,移过父元素和子元素是都会触发!!!!!
尝试了@mouseout.stop.prevent=“addClassload(index)” 等阻止冒泡事件都不行
最后查资料看到了大神的科普才解决
解决办法很简单就是 把mouseout和mouseover 更换成mouseenter和mouseleave
此处非常想发一个捂脸哭的表情包 如果有人对大神的博客感兴趣 链接放在最后

原理写在这里:

1. mouseover与mouseout

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

2. mouseleave 与 mouseenter

只有在鼠标指针从元素外穿入被选元素(到元素内)时,才会触发 mouseenter 事件。

只有在鼠标指针从元素内穿出被选元素(到元素外)时,才会触发 mouseleave 事件。

总结一下就是 一般情况下都不推荐使用mouseover与mouseout 最好使用mouseleave 与 mouseenter
真的是被坑惨了啊

大神链接,大神的文章的超级有用 特别适合我这种小白!

https://blog.csdn.net/weixin_34281537/article/details/92386783

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 使用鼠标移入移出事件发生冒泡事件阻止冒泡不生效的解决方法 的相关文章

  • 三个月后,快手To B怎么样了?

    未来 如何独立作战和走出快手的TOC 客户资源圈 或将成为快手TOB新的十字路口 作者 斗斗 编辑 皮爷 出品 产业家 人口红利终结 流量红利终结 超常规的高速增长终结 TOC模式的路越来越难走了 快手与抖音作为短视频行业 的两大巨头 主要
  • Linux下的TCP通信

    Linux下的TCP通信 今天我们介绍如何编写Linux下的TCP程序 关于UDP程序可以参考这里 http blog csdn net htttw article details 7519971 本文绝大部分是参考 Linux程序设计 第
  • Java算法给定一个整数数组,找出其中两个数相加等于目标值

    给定一个整数数组 找出其中两个数相加等于目标值 例如 给定数组及目标值 nums 2 7 11 15 target 9 因为nums 0 nums 1 2 7 9 返回 0 1 使用辅助空间 使用哈希表 时间复杂度是O n 空间复杂度 O
  • 半监督目标检测yolo+FixMatch

    目前实验发票印章检测 只需1张训练集即可达到0 921 mAP 5 如果用31张训练集可达到0 952 mAP 5 无标签数据均使用600张 待填坑 敬请期待
  • tkinter窗口切换

    方法1 按钮 Frame 步骤 1 1创建主桌面 import tkinter as tk root tk Tk 1 2 创建不同的Frame 相当于不同的桌布 分别用来创建不同的窗口 face1 tk Frame root face2 t
  • Java面试官最爱问的volatile关键字

    在Java的面试当中 面试官最爱问的就是volatile关键字相关的问题 经过多次面试之后 你是否思考过 为什么他们那么爱问volatile关键字相关的问题 而对于你 如果作为面试官 是否也会考虑采用volatile关键字作为切入点呢 为什
  • 如何建立chrony服务器

    Chrony由两个程序组成 分别是chronyd和chronyc chronyd是一个后台运行的守护进程 用于调整内核中运行的系统时钟和时钟服务器同步 它确定计算机增减时间的比率 并对此进行补偿 chronyc提供了一个用户界面 用于监控性
  • 生成 Linux 运行时间报告的 Bash 脚本

    出于一些原因 你可能需要每月收集一次 Linux 系统运行时间报告 Magesh Maruthamuthu 出于一些原因 你可能需要每月收集一次 Linux 系统运行时间报告 如果是这样 你可以根据需要使用以下 bash 脚本 之一 我们为
  • Effect Hook

    1 数据获取 设置订阅以及手动更改 React 组件中的 DOM 都属于副作用 2 可以把 useEffect Hook 看做 componentDidMount componentDidUpdate 和 componentWillUnmo
  • 关于 Windows 10 下安装 Linux 过程及报 'WSL...' 错误的解决办法

    今天下午在群里看到有朋友发有关 Windows 10 下按安装 Linux 系统 的消息 小白我很是激动啊 Linux 贴近工作 Windows 贴近生活 割舍不下 虽然可以在Windows下安装虚拟机 但是真的很占空间 0 0 而这个消息
  • 逻辑回归、激活函数sigmoid、损失及优化、案例代码实现

    一 逻辑回归 逻辑回归 Logistic Regression 是机器学习中的一种分类模型 是一种分类算法 与回归之间有一定的联系 由于算法的简单和高效 在实际中应用非常广泛 应用场景 广告点击率 是否为垃圾邮件 是否患病 金融诈骗 虚假账
  • Java-API简析_java.lang.Float类(基于 Latest JDK)(浅析源码)

    版权声明 未经博主同意 谢绝转载 请尊重原创 博主保留追究权 https blog csdn net m0 69908381 article details 131129886 出自 进步 于辰的博客 因为我发现目前 我对Java API的
  • Sqoop的简单使用案例和一些常用命令及参数

    Sqoop的简单使用案例 1 导入数据 在Sqoop中 导入 概念指 从非大数据集群 RDBMS 向大数据集群 HDFS HIVE HBASE 中传输数据 叫做 导入 即使用import关键字 1 1 RDBMS到HDFS 1 确定Mysq
  • java——编程案例

    文章目录 案例1 买飞机票 案例2 找素数 案例3 开发验证码 案例4 数组元素的复制 案例5 评委打分 案例6 数字加密 案例7 模拟双色球 案例1 买飞机票 import java util Scanner public class T
  • stm32ftp服务器实现文件传输,stm32 ftp服务器

    stm32 ftp服务器 内容精选 换一换 客户端压力机硬件要求如表1所示 负载均衡节点 LVS 硬件要求如表2所示 缓存节点 Nginx ATS 硬件要求如表3所示 源站节点 Nginx 硬件要求如表4所示 操作系统要求如表5所示 软件要
  • MSN下载2010最新版

    转载的 哈哈 我的笔记 MSN 最新微软官网下载地址 NLP伪原创技术早期并不是很受欢迎 基于主动学习的伪原创句法识别研究 这几年专注于Web开发 Web界面设计的心得在这篇文章中已经与大家分享 做项目时 如何做比较美观大方的数据输入窗体
  • apisix高性能网关-中文开发文档

    2020年6月12日13 48 33 github https github com apache incubator apisix 目前此项目已有成为apache孵化项目 官方中文文档 https github com apache in

随机推荐

  • 拓展人脉,把握机会,摆脱“孔乙己的长衫”

    孔乙己的长衫 学历究竟成为敲门砖还是枷锁 孔乙已是鲁迅笔下人物 穷困流倒还穿着象征读书人的长衫 迁腐 麻木 最近 大家自我调佩是 当代孔乙己 学历成为思想负担 找工作时高不成低不就 我将从以下几个方面来说一说我对这方面的看法 我认为 在当今
  • 1. 两数之和

    目录 给定一个整数数组 nums 和一个整数目标值 target 请你在该数组中找出 和为目标值 target 的那 两个 整数 并返回它们的数组下标 你可以假设每种输入只会对应一个答案 但是 数组中同一个元素在答案里不能重复出现 你可以按
  • 数据结构--计算表达式完整版(涉及乘方)

    思路 两个栈 数据栈与符号栈 在描述优先级时 我们将加减描述为 I级 乘除为 II既 乘方为 III级 1 在之前的只有加减乘除的计算表达式里 就有了初步思路 当我们要计算的时候 局部计算函数 数字栈与符号栈 分别在数字栈顶取出两个操作数
  • i2c_SLAVE

    driver driver通过I2C的接口与DUT相连 负责接收DUT通过接口传来的地址数据等读写信息并作出反应 将sequencer中传来的trans中的数据驱动到总线上并根据设置的ack和nack作出回应 将总线上写来的数据存到tran
  • Visual Studio 2019 C语言程序(VS2019 C语言)

    新的Visual Studio 2019出来已经有一段时间了 博主也是一开始就从vs2017换到了vs2019 发现整体的操作流程还是有一定的改变 因为之前发表过一个vs2017的博客 对Visual Studio IDE和风格确实非常喜欢
  • Qt5 通过 QFtp 实现 Ftp文件下载

    在Qt5环境下使用自编译的QFtp库 参考官方提供的实例 对部分内容进行更改 实现了Ftp下载文件的客户端 详细代码如下 h头文件 ifndef FTPWINDOW H define FTPWINDOW H include
  • linux下查看某服务端口对应的进程ID

    Linux下查看某端口号所对应的进程ID 使用lsof命令 格式为 lsof i 端口号 例如 lsof i 30000 root Web Service CAServer lsof i 30000 COMMAND PID USER FD
  • oracle的io优化--db_writer_processes & dbwr_io_slaves对比

    author skate time 2011 09 29 db writer processes 和 dbwr io slaves对比 在计算机世界里 磁盘的发展速度远低于cpu memory 磁盘io现在已经成为计算机的瓶颈 对于orac
  • 揭密微信跳一跳小游戏那些外挂

    欢迎大家前往云 社区 获取更多腾讯海量技术实践干货哦 作者 Hahn 腾讯高级UI工程师 由 WeTest质量开放平台团队 发布于云 社区 WeTest 导读 张小龙 这个游戏发布以后 其实它的效果有点超出我们的预期 我们自己开玩笑说 这个
  • mysql数据表查询操作

    数据表查询操作 准备工作 导入之前需要先创建一个数据库 数据库资料传送门 使用新创建的数据库 使用 source 文件地址 导入数据 create database db charset utf8 use db source home py
  • win10网上邻居看不到别的共享电脑怎么样办

    https jingyan baidu com article 4853e1e5b714aa1909f72600 html 转载于 https www cnblogs com kuangke p 10901469 html
  • 【Dom获取&属性操作】JavaScript 全栈体系(十)

    Web APIs 第四章 操作元素属性 一 操作元素常用属性 还可以通过 JS 设置 修改标签元素属性 比如通过 src更换 图片 最常见的属性比如 href title src 等 语法 对象 属性 值
  • python+appium自动化测试-pytest+allure测试报告(一)

    来自APP Android端自动化测试初学者的笔记 写的不对的地方大家多多指教哦 一 Allure安装 1 pytest和allure插件安装 pip install allure pytest pip install pytest 2 A
  • python3+robotframework+selenium3 浏览器兼容性测试

    robot framework 测试浏览器兼容性 目前ride已支持一下浏览器 firefox ie chrome safari 本次我们已win 10中的ie为例 来看看如何使用python3 robotframework seleniu
  • 我是如何从通信转到Java软件开发工程师的?

    我的CSDN和公众号的读者里面有绝大部分都是在校学生 有本科的 也有专科的 我在微信里收到很多读者的提问 大部分问题都跟如何学习编程有关 有换专业自学的 有迷茫不知道如何学习的 有报培训班没啥效果的等等 我能感受到他们的诚意和焦虑 所以我觉
  • 哪些情况可以终止线程呢

    目录 哪些情况可以终止线程的进行 题目解析 线程结束的三个原因 线程结束的三种方法 具体分析 1 使用标志位推出线程 2 使用stop方法强制终止线程 3 使用interrupt终止线程 哪些情况可以终止线程的进行 题目解析 答案选C A
  • Kotlin常用的高阶函数(Filter、TakeWhile、Let、Apply、With......)

    一 Filter package net println kotlin chapter5 builtins author wangdong description Kotlin常见的高阶函数 fun main args Array
  • 内核的并发和竞态(信号量、completion、自旋锁)

    1 并发和并行 1 并行 在同一时刻有多个线程一起运行 2 并发 在同一时刻只有一个线程在运行 但是在一个时间段内有多个线程运行 总结 并发是宏观的并行 因为CPU运行特别快 虽然CPU不断在切换运行的线程 但是对于人来说 根本感知不到CP
  • Linux下线程同步(带你了解什么是互斥锁、死锁、读写锁、条件变量、信号量等)

    线程同步概念 假设有四个线程A B C D 当前一个线程A对内存中的共享资源进行访问的时候 其他线程B C D都不可以对这块内存进行操作 直至A对这块内存访问完毕为止 B C D中的一个才能访问这块内存 剩余的俩个需要继续阻塞等待 一次类推
  • vue 使用鼠标移入移出事件发生冒泡事件阻止冒泡不生效的解决方法

    今天是非常忙碌又很坑的一天啦 又踩了一个坑 按需求写了一个鼠标移入出现价格 详情的盒子 鼠标移出消失的方法 使用mouseout和mouseover 但是这时候就发生了冒泡事件 父级元素绑定定mouseout和mouseover 移过父元素