Vue3中如何获取鼠标在浏览器x轴和y轴的位置
更新时间：2024年07月26日 08:45:39 作者：我不是长安
这篇文章主要介绍了Vue3中如何获取鼠标在浏览器x轴和y轴的位置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue3获取鼠标在浏览器x轴和y轴位置
在日常开发和工作中我们经常遇到需要获取鼠标指向的当前位置，很多人感觉很难并不好理解，但是看文本文我相信你会对这个知识有更深层的认识。
使用onMounted定义document.addEventListener，第一个参数是鼠标指向类型，也可以单击 click、mousedown，第二个参数是事件函数。
另外最后一个参数决定该事件的响应顺序；
① 如果为true事件执行顺序为 addEventListener---标签的onclick事件---document.onclick。
② 如果为false事件的顺序为 标签的onclick事件---document.onclick---addEventListener
一、第一种
此时我们的事件函数里可以在控制台打印出来当前信息。
将它赋值给我们定义的变量即可。
二、第二种使用reactive，方便前期书写和后期维护
三、第三种使用封装
① assets目录下新建js文件，把获取x、y轴封装起来。
在使用的页面直接引入即可调用。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue路径上如何设置指定的前缀，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue轮播图插件vue-awesome-swiper的使用代码实例
本篇文章主要介绍了vue轮播图插件vue-awesome-swiper的使用代码实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
解决antd datepicker 获取时间默认少8个小时的问题
这篇文章主要介绍了解决antd datepicker 获取时间默认少8个小时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本文给大家分享的是如何使用vue实现鼠标点击选中的效果，附上了实例代码，有需要的小伙伴可以参考下2020-10-10
这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
文章介绍了如何在Vue3和Beego中配置跨域请求,在Beego的router.go文件的init函数中添加option函数来回应预检请求,以支持跨域请求,这是个人经验分享,希望能帮助到大家2025-01-01
这篇文章主要为大家详细介绍了vue实现翻牌动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vant的安装和配合引入Vue.js项目里的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在有些情况下需要使用不同的语言来完成一个项目,因此就有可能出现不同语言的程序之间的相互调用,下面这篇文章主要给大家介绍了关于vue.js调用python脚本并给脚本传数据的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue 调用 RESTful风格接口操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论