vue使用@mouseenter和@mouseleave事件,没有效果的原因
最近在写代码时,有个需求是,需要通过鼠标移入的时候,通过条件判断是否显示删除图标按钮。这时候就需要在删除图标上,绑定鼠标移入@mouseenter,鼠标移除@mouseleave事件来搞定需求。问题:在图标上直接绑定@mouseenter,@mouseleave,编写函数。运行后发现并没有效果,控制台没有看到输出。html:js:**解决:**@mouseenter@mouseleave要绑定在父
·
最近在写代码时,有个需求是,需要通过鼠标移入的时候,通过条件判断是否显示删除图标按钮。
这时候就需要在删除图标上,绑定鼠标移入@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>
更多推荐
已为社区贡献1条内容
所有评论(0)