vue 项目 如何避免子元素触发父元素的mouseout事件

最新推荐文章于 2024-01-01 09:00:00 发布
原创 最新推荐文章于 2024-01-01 09:00:00 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在项目中使用mouseover和mouseout事件遇到的问题，特别是在子元素触发mouseout事件的情况。文章提出了解决方案，建议使用mouseenter和mouseleave事件，以避免冒泡事件导致的问题，确保鼠标悬停效果的正确实现。

使用yarn安装时，有时候会出现版本问题；造成mouseover mouseout 全部分类菜单放上后子元素会触发mouseout ；最终查到原因是因为浏览器兼容性问题；

项目中给父元素加了mouseover、mouseout事件，但是，鼠标移动到子元素上总会自动触发mouseout事件，使用prevent、stop或者self修饰符都没什么用。

 

 

如果用mouseover mouseout 无法完成鼠标放到全部分类，然后下移选择菜单； 所以查到要用mouseenter,mouseleave 来完成这个效果； 可能跟冒泡事件有关，也可能跟高度溢出有关；

反正做个比较，后期方便填坑！

参考：

https://forum.vuejs.org/t/mouseout/20419

鼠标经过子元素触发mouseout，mouseover事件的解决方案
09-03
这就意味着，当鼠标从父元素移向子元素时，会先触发父元素的`mouseout`，接着触发子元素的`mouseover`，反之亦然。这种行为在某些情况下可能会导致不期望的结果，比如本例中的动画异常。 为了解决这个问题，我们...
js 阻止子元素响应父元素的onmouseout事件具体实现
10-26
但在一些场景下，我们需要在鼠标从子元素移出到父元素时不触发父元素的onmouseout事件，以避免不必要的响应。 在文档中提到的场景，就是要实现阻止子元素的onmouseout事件触发父元素的onmouseout事件。具体实现方法...
vue项目如何避免子元素触发父元素的mouseout事件
H-L的博客
10-30 1778
https://blog.youkuaiyun.com/wsxc451/article/details/104239969 使用yarn安装时，有时候会出现版本问题；造成mouseover mouseout全部分类菜单放上后子元素会触发mouseout ；最终查到原因是因为浏览器兼容性问题； 项目中给父元素加了mouseover、mouseout事件，但是，鼠标移动到子元素上总会自动触发mouseout事件，使用prevent、stop或者self修饰符都没什么用。 如果用mouseover mouseo..
详解Vue3中的鼠标事件mousemove、mouseover和mouseout
热门推荐
一起学习
01-01 2万+
本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。
vue中解决 mouseenter 和 mouseout 时，鼠标进入子组件造成 mouseout 触发而闪烁的问题
tianjiliuhen的博客
05-25 1万+
解决 mouseenter 和 mouseout 时，鼠标进入子组件造成 mouseout 触发而闪烁的问题1.需求背景2.核心解决方法3.两对鼠标事件的区别（1）mouseover 和 mouseout（2）mouseenter 和 mouseleave 1.需求背景 项目中，要对系统功能进行分类索引，所以简单设计了下，用了下面的处理方式。 div原样： 鼠标放到div块上时： 鼠标离开时，恢复原样： 需要做一个图标式的便签，当鼠标移动到div上时，div变大，并且显示具体条目，当鼠标离开时，恢复d
当移过元素的子元素时，mouseout的事件不触发
weixin_34226182的博客
04-18 662
场景：在一个元素上监听了一个mouseout的事件，但是当鼠标在这个元素的子元素上移动时，就会触发这个事件。但是我们希望是在这个元素内活动，都是算这个元素的，并不希望触发这个事件。 function onMouseOut(this, event) { //this is the original element the event han...
子元素DIV不随父DIV的滚动条移动
学习园地
05-02 5419
子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。根源就是子元素的"position:relative" 解决方法：为父元素也添加"position:relative"设置
JS中mouseover和mouseout多次触发问题如何解决
10-22
这种特性意味着即使鼠标并没有真正离开父元素，当鼠标移动到子元素上时，父元素的mouseout事件也会被触发。 3. mouseenter和mouseleave事件：与mouseover和mouseout不同，mouseenter和mouseleave事件不会在事件冒泡...
Vue 中 @mouseenter 和 @mouseover 事件有何区别？
最新发布
08-30
- 会冒泡（可能会触发父元素上的mouseover事件）。 另外，根据引用[4]： - `mouseenter` 和 `mouseleave` 是一对，它们不会干扰子元素。 - `mouseover` 和 `mouseout` 是一对，它们会干扰子元素。 ### 图示说明 ...
Vue2电商前台项目（二）：完成Home首页模块业务
weixin_42044763的博客
09-09 1万+
1、actions执行的时候，要通过api里面的接口函数调用，向服务器发请求，获取服务器的数据，需要把之前的api引入进来，在这里发请求就是要调用这个reqCategoryList函数，如果请求成功（code===200），那么把数据交给mutations进行处理。防抖：前面的所有的触发都被取消，最后一次执行在规定的事件之后才会触发，也就是说如果连续的快速触发，只会执行一次 ----------------------当事件被触发后，延迟 n 秒后再执行回调，返回的是一个函数。
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
10-15
主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
如何解决鼠标移动到子元素 会触发父元素的mouseout事件
weixin_45899022的博客
07-07 1906
用mouseleave/mouseenter代替mouseover/mouseout mouseover与mouseenter mouseover => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 mouseenter => 只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。 mouseout与mouseleave mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 mou
onmouse 在div包含子元素 失效问题
gai_ge的专栏
01-27 1509
问题描述： javascript 在处理onmouseout事件时候如果div含有子元素，当鼠标移动到div的内部的子元素时候就会触发，但是这时候我们并不这样理解， 我们还会理解为这时候还在div内部。 例如 但我们把鼠标移动到child上面的时候就会触发onmouseout事件，这时候我们可以在onmouseout内部写上判断事件的来源来真正实现我们需要的 onmouseo
vue.js mouseover、mouseout BUG? 鼠标滑过子元素，区无法点击子元素
qq_40258091的博客
03-27 3278
<template> <div class="app"> <headVue ></headVue> <div class="fu"> <div class="nav"> <ul> <li v-fo...
父级和子级div的点击事件相互影响
qq_36904182的博客
04-19 1057
解决方法：event.stopPropagation();
图解Vue的四个v-on:mouse触发机制及区别
此人很懒，什么都没有写
10-18 1188
原文链接：https://blog.youkuaiyun.com/qq_41604269/article/details/105931053 四个v-on:mouse分别是：mouseenter（进入）、mouseover（逗留）、mouseout（暂离）、mouseleave（离开） 书写格式： ① v-on:mouseenter=“执行命令” ② @mouseenter=“执行命令” 一张图说明一切！ 以父DIV为主元素，则 进父DIV时，触发mouseenter和mouseover 在父DIV逗留，一直触发mo
解决vue项目中@mousemove 事件 子元素触发了父元素事件
weixin_46073263的博客
07-08 3918
解决vue项目中@mousemove 事件 子元素触发了父元素事件 , 干掉子元素所有事件!
如何防止鼠标移出移入子元素触发mouseout和mouseover事件
阵雨的博客
08-11 1万+
我想实现的目标：当鼠标进入黑色框时，橙色框执行淡入动画；当黑色框范围移动的时候（即使经过粉色框，动画仍然不被触发）；当鼠标移出的时候，橙色方块消失。 遇到的问题阐述：当鼠标移入黑色框的时候，橙色框执行淡入动画，但是当鼠标从黑色框经过粉色框的时候，橙色框就消失了，然后又执行一遍淡入动画。当鼠标从粉色框移出到黑色框的时候，橙色框的淡入动画又被执行。这不是我想要的。 初期代码： <!DOC...
【前端】vue实现鼠标移入移出事件+解决鼠标事件没有反应
m0_64210833的博客
04-06 4501
vue实现鼠标移入移出事件+解决鼠标事件没有反应
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值