javascript实时获取鼠标坐标值并显示的方法

下面就详细讲解一下“JavaScript实时获取鼠标坐标值并显示的方法”。

下面就详细讲解一下“JavaScript实时获取鼠标坐标值并显示的方法”。

方法一：使用mousemove事件

我们可以通过mousemove事件实时获取鼠标的坐标值，然后将其显示在页面上。这里给出一个示例代码：

<div id="mouse">鼠标坐标：</div>
<script>
  var mouse = document.querySelector('#mouse');
  document.addEventListener('mousemove', function(event) {
    mouse.innerHTML = '鼠标坐标：' + event.clientX + ',' + event.clientY;
  });
</script>

在上面的代码中，我们首先用querySelector方法获取到页面中的id为mouse的元素，然后使用addEventListener方法监听document的mousemove事件，每当鼠标移动时，就将鼠标的坐标值通过innerHTML属性显示在mouse元素中。

方法二：使用onmousemove属性

除了使用mousemove事件来实时获取鼠标坐标值，我们还可以使用onmousemove属性。onmousemove是DOM对象的一个属性，可以用来指定鼠标移动时所要执行的代码。这里给出一个示例代码：

<div id="mouse">鼠标坐标：</div>
<script>
  var mouse = document.querySelector('#mouse');
  document.onmousemove = function(event) {
    mouse.innerHTML = '鼠标坐标：' + event.clientX + ',' + event.clientY;
  }
</script>

在上面的代码中，我们也是首先用querySelector方法获取到页面中的id为mouse的元素，然后使用document.onmousemove属性指定鼠标移动时所要执行的代码，每当鼠标移动时，就将鼠标的坐标值通过innerHTML属性显示在mouse元素中。

以上就是“JavaScript实时获取鼠标坐标值并显示的方法”的完整攻略。