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框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能
这篇文章主要介绍了Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度功能,本通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要介绍了vue-cli配置全局sass、less变量的方法，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
最近做项目遇到这样的一个需求，通过select元素来选择音频文件的名称，点击按钮可以进行试听。接下来通过本文给大家介绍vue项目中通过点击事件读取音频文件的方法,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了详解mpvue实现对苹果X安全区域的适配，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
本文主要介绍了Vue3中使用vuex4的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了vue项目里面引用svg文件并给svg里面的元素赋值,本文分步骤通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
这篇文章主要介绍了vue路由拦截及页面跳转的设置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
我们开发后台管理系统过程中，会由不同的人操作系统，有admin（管理员）、superAdmin(超管)，及各种运营、财务人员。为了区别这些人员，会给不同的人分配不一样的角色来展示不同的菜单，这就必须要通过动态路由来实现。下面就来介绍vue实现动态路由,需要的朋友可参考一下2021-10-10
这篇文章主要介绍了基于vue的验证码组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论