Vue中常用的鼠标移入移出事件详解

 更新时间:2023年07月03日 15:43:28   作者:爱捣鼓的XiaoPu  
这篇文章主要给大家介绍了关于Vue中常用的鼠标移入移出事件的相关资料,鼠标移入移出事件在 Vue 中可以通过@mouseenter和@mouseleave来绑定,需要的朋友可以参考下

Vue中常用的鼠标移入移出事件

Vue中常用的鼠标移入移出事件有两种:@mouseenter@mouseleave

@mouseenter事件会在鼠标移入元素时触发,而@mouseleave事件会在鼠标移出元素时触发。这两个事件可以用于实现一些交互效果,例如鼠标移入时显示某些内容,鼠标移出时隐藏。

在Vue模板中,可以使用这两个事件来绑定方法,例如:

<template>
  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">鼠标移入移出</div>
</template>

在Vue组件的methods中定义对应的方法:

export default {
  methods: {
    handleMouseEnter() {
      console.log('鼠标移入');
    },
    handleMouseLeave() {
      console.log('鼠标移出');
    }
  }
}

这样当鼠标移入或移出该元素时,对应的方法就会被调用。

@mouseleave事件来代替mouseout事件

mouseout是JavaScript原生的鼠标移出事件,与Vue中的@mouseleave事件类似,但有一些细微的差别。

mouseout事件会在鼠标移出元素时触发,但如果鼠标移入该元素的子元素,也会触发一次mouseout事件。这样可能会导致一些意外的行为,例如当鼠标从元素上移入其子元素时,可能会触发元素的mouseout事件,从而导致一些不必要的操作。

因此在Vue中,建议使用@mouseleave事件来代替mouseout事件。

@mouseenter事件来代替mouseover事件

mouseover是JavaScript原生的鼠标移入事件,与Vue中的@mouseenter事件类似,但有一些细微的差别。

mouseover事件会在鼠标移入元素时触发,但如果鼠标移入该元素的子元素,不会触发一次mouseover事件。这样可以避免一些意外的行为,例如当鼠标从元素的子元素上移出时,不会触发元素的mouseover事件,从而避免一些不必要的操作。

因此在Vue中,建议使用@mouseenter事件来代替mouseover事件。

附:两对鼠标事件的区别

其中,mouseover触发优先级高于mouseenter,mouseout触发优先级高于mouseleave

1、mouseover 和 mouseout

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

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

是根据鼠标事件的target进行触发的,是一种精确触发。当为某一组件(如div)设置这两个事件时,当事件的target是该组件时,就会触发mouseover,但是当鼠标划到该组件的子组件上时,因为target改变了,所以就触发了 mouseout 事件,这往往就会造成页面元素的闪烁,反复触发移入移出事件。

2、mouseenter 和 mouseleave

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

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

mouseenter 和 mouseleave是根据组件在页面的范围(坐标)进行触发的。不管组件中是否有子组件,只要鼠标进入到组件的范围内,就可以触发mouseenter事件,离开范围,则触发mouseleave事件。

总结 

到此这篇关于Vue中常用的鼠标移入移出事件的文章就介绍到这了,更多相关Vue鼠标移入移出事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用Vue3+PDF.js实现PDF预览功能

    使用Vue3+PDF.js实现PDF预览功能

    项目中有一个需要预览下载pdf的需求,网上找了很久,决定使用 pdf.js 完成,下面这篇文章主要给大家介绍了关于使用Vue3+PDF.js实现PDF预览功能的相关资料,需要的朋友可以参考下
    2022-12-12
  • 基于element-ui中el-select下拉框选项过多的优化方案

    基于element-ui中el-select下拉框选项过多的优化方案

    这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue计算属性的使用

    Vue计算属性的使用

    本篇文章主要介绍了Vue计算属性的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue3中实现发送网络请求功能(最新推荐)

    Vue3中实现发送网络请求功能(最新推荐)

    Axios是一个基于Promise的HTTP客户端,可以在浏览器和Node.js中用于发送HTTP请求,本文主要介绍在Vue3中实现发送网络请求功能,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue波纹按钮组件制作

    Vue波纹按钮组件制作

    本文给大家分享了VUE制作点击按钮出现水波纹效果的组件过程,对此有需求的朋友可以跟着学习下。
    2018-04-04
  • vue 组件中slot插口的具体用法

    vue 组件中slot插口的具体用法

    这篇文章主要介绍了vue 中slot 的具体用法,包括子组件父组件的代码介绍,需要的朋友可以参考下
    2018-04-04
  • Vue 关于$emit与props的使用示例代码

    Vue 关于$emit与props的使用示例代码

    父组件使用 props 把数据传给子组件,子组件使用 $emit 触发父组件的自定义事件,今天通过示例给大家详细介绍下Vue 关于$emit与props的使用,感兴趣的朋友一起看看吧
    2022-03-03
  • Vue3 中的 Vue-Router 和 VueX详解

    Vue3 中的 Vue-Router 和 VueX详解

    VueX 提供了一个全局都可以使用的数据管理仓库,不用考虑父子传值之类的问题,并且可以跨页面传递数据,提高了可维护性,这篇文章主要介绍了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以参考下
    2022-12-12
  • 详解Vue的computed(计算属性)使用实例之TodoList

    详解Vue的computed(计算属性)使用实例之TodoList

    本篇文章主要介绍了详解Vue的computed(计算属性)使用实例之TodoList,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue中配置后端接口服务信息详解

    vue中配置后端接口服务信息详解

    这篇文章主要介绍了vue中配置后端接口服务信息详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论