Vue3中如何获取鼠标在浏览器x轴和y轴的位置
作者:我不是长安
这篇文章主要介绍了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轴封装起来。
在使用的页面直接引入即可调用。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。