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.js自定义事件的表单输入组件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了JavaScript实现简单的图片切换功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-04-04
这篇文章主要介绍了vue 本地环境判断方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue支持搜索与筛选的用户列表实现流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要为大家介绍了VUE使用canvas绘制管线管廊实现思路详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
本篇文章主要介绍了vue router 动态路由和嵌套路由，详细的介绍了动态路由和嵌套路由的使用方法，有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了使用vue3-print-nb实现打印pdf分页的相关资料,这种方法不仅适用于Vue3项目,也可以在其他前端框架中实现类似的打印分页功能,需要的朋友可以参考下2024-10-10
解决vue props传Array/Object类型值,子组件报错的情况
这篇文章主要介绍了解决vue props传Array/Object类型值,子组件报错的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
PDFObject 是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。这篇文章主要为大家详细介绍了使用pdfobject实现预览pdf的功能，需要的可以了解一下2023-03-03
最新评论