获取鼠标在盒子内的坐标_vue3获取鼠标在盒子内得位置

作者：我家小花儿 | 2024-04-26 18:52:05

踩

vue3获取鼠标在盒子内得位置

效果如下：

大致思想：

我们学过了事件对象获取在页面中的坐标，e.pageX，e.pageY 或 e.clientX，e.clientY，又学过了offset 的各个属性，再这里我们用到了 offsetTop 与 offsetLeft，只需要相减即可得到在盒子内的坐标

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2h5Y2h6KW_5pyA6L-R5oCO5LmI5qC3,size_20,color_FFFFFF,t_70,g_se,x_16

代码：


 
  <style>
    .box{
      padding: 10px;
      margin: 40px;
      box-sizing: border-box;
      width: 400px;
      height: 400px;
      background-color: rgb(250, 210, 210);
      border: 1px solid;
    }
  </style>
</head>
<body>
    <div class="box"></div>
    <script>
      var box=document.querySelector('.box');
      box.addEventListener('mousemove',function(e){
        var x=e.clientX-this.offsetLeft;
        var y=e.clientY-this.offsetTop; 
        box.innerHTML='鼠标的x坐标为:' + x + ',鼠标的y坐标为:' + y;
        })
    </script>
</body>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/492574