vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3获取鼠标在浏览器x轴和y轴位置

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轴封装起来。

在使用的页面直接引入即可调用。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文