vue使用@mouseenter和@mouseleave事件，没有效果的原因

最新推荐文章于 2024-04-29 16:20:12 发布

流浪码农~

最新推荐文章于 2024-04-29 16:20:12 发布

阅读量1.3w

点赞数 9

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42190844/article/details/119571421

版权

最近在写代码时，有个需求是，需要通过鼠标移入的时候，通过条件判断是否显示删除图标按钮。
这时候就需要在删除图标上，绑定鼠标移入@mouseenter，鼠标移除@mouseleave事件来搞定需求。

在图标上直接绑定@mouseenter，@mouseleave，编写函数。运行后发现并没有效果，控制台没有看到输出。

html:
在这里插入图片描述

js:
在这里插入图片描述

@mouseenter @mouseleave要绑定在父元素上

在这里插入图片描述

查阅了原生的js事件，发现 onmouseenter事件不支持冒泡，子元素不会触发。
onmouseover事件则可以，父子元素都会触发

在这里插入图片描述

此外也有可能是，使用到了组件如element-ui，想要在el-xxx上面绑定@mouseenter
需要加native修饰符,给组件绑定原生事件

   <el-button type="primary" @mouseenter.native="mouseenter( )" @click="trialBalanceModal=false">
            {{ $t('button.ok') }}
   </el-button>

关注