欢迎光临
我的个人博客网站

JavaScript获取鼠标在盒子里的坐标


实现思路:

  1. 在盒子内点击,想要得到鼠标距离盒子左右的距离
  2. 首先得到鼠标在页面中的坐标e.pageX,e.page
  3. 其次得到盒子在页面中的距离box.offsetLeft,box.offsetTop
  4. 用鼠标距离页面的坐标减去盒子在页面中的距离,得到鼠标在盒子内的坐标
  5. 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动mousemove

代码实现

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         .box {             width: 300px;             height: 300px;             background-color: pink;             margin: 200px;         }     </style> </head>  <body>     <div class="box"></div>     <script>         var box = document.querySelector('.box');         box.addEventListener('mousemove', function(e) {             var x = e.pageX - this.offsetLeft;             var y = e.pageY - this.offsetTop;             this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;         })     </script> </body>  </html> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript获取鼠标在盒子里的坐标
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏