关键词

js实现获取鼠标当前的位置

获取鼠标当前位置是开发中常需要用到的功能之一。JavaScript可以轻松实现该操作。以下是获取鼠标当前位置的完整攻略。

获取鼠标当前位置的方式

常用的方式是利用鼠标移动事件,不断获取鼠标当前位置的横纵坐标。可以用鼠标移动事件mousemove来实现。

实现代码

下面是一个基本的 JavaScript 实现:

document.addEventListener('mousemove', function(e) {
  console.log('X轴坐标:', e.clientX, 'Y轴坐标:', e.clientY);
});

代码说明:

  1. document 绑定了 mousemove 事件,该事件在鼠标移动时会触发
  2. 回调函数中,使用 console.log() 打印出鼠标当前位置的横纵坐标

示例1:鼠标位置跟随

下面的示例展示了如何利用上述方法,让一个图片跟随鼠标移动。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>鼠标位置跟随</title>
  <style>
    #box {
      position: relative;
      height: 300px;
      width: 500px;
      margin: 100px auto;
    }
    #image {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <img id="image" src="image.png" alt="Image">
  </div>
  <script>
    var image = document.getElementById('image');
    document.addEventListener('mousemove', function(e) {
      var x = e.clientX;
      var y = e.clientY;
      var box = document.getElementById('box');
      var boxX = box.offsetLeft;
      var boxY = box.offsetTop;
      var imageX = x - boxX;
      var imageY = y - boxY;
      image.style.left = imageX + 'px';
      image.style.top = imageY + 'px';
    });
  </script>
</body>
</html>

示例代码说明:

  1. mousemove 事件被绑定在 document
  2. 获取鼠标当前位置的横纵坐标
  3. 获取图片所在父元素(盒子)的左上角位置,计算出图片相对于盒子的位置
  4. 将图片位置设置为相对于盒子的位置

示例2:鼠标位置划线

下面的示例展示了如何利用上述方法,获取鼠标轨迹,绘制轨迹图形。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>鼠标位置划线</title>
  <style>
    #box {
      height: 300px;
      width: 500px;
      margin: 100px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    #canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var box = document.getElementById('box');
    canvas.width = box.clientWidth;
    canvas.height = box.clientHeight;
    var isDrawing = false;
    document.addEventListener('mousemove', function(e) {
      if (isDrawing) {
        ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
        ctx.stroke();
      }
    });
    canvas.addEventListener('mousedown', function(e) {
      isDrawing = true;
      ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);      
    });
    canvas.addEventListener('mouseup', function(e) {
      isDrawing = false;
    });
  </script>
</body>
</html>

示例代码说明:

  1. mousemove 事件被绑定在 document
  2. 获取鼠标当前位置的横纵坐标
  3. 绘制起点和终点之间的相连线
  4. mousedownmouseup 事件用来控制画线动作的开始和结束

结论

使用 JavaScript 获取鼠标当前位置非常简单。只要理解了获取鼠标当前位置的方式,利用JavaScript就能实现各种各样的效果,比如跟随、绘制等等。

本文链接:http://task.lmcjl.com/news/9348.html

展开阅读全文