1. 使用event对象获取坐标

我们可以通过事件对象来获取鼠标点击的坐标。具体方法如下：

document.addEventListener('click', function(e) {
  // e.clientX 和 e.clientY 分别表示鼠标点击时鼠标的水平和垂直坐标
  console.log('鼠标点击位置坐标：', e.clientX, e.clientY);
});

上面的代码中，我们在document对象上添加了一个click事件监听器，当页面中出现鼠标点击事件时，回调函数就会被触发。在回调函数中，我们可以通过event对象的clientX和clientY属性获取鼠标点击的水平和垂直坐标，并将其打印到控制台上。

2. 使用offsetX和offsetY属性获取坐标

我们也可以通过offsetX和offsetY属性获取鼠标点击的坐标。具体方法如下：

document.addEventListener('click', function(e) {
  // e.offsetX 和 e.offsetY 分别表示鼠标点击位置距离元素左上角的水平和垂直距离
  console.log('鼠标点击位置坐标：', e.offsetX, e.offsetY);
});

上面的代码中，我们同样在document对象上添加了一个click事件监听器，在回调函数中，我们通过event对象的offsetX和offsetY属性获取鼠标点击所在元素内的水平和垂直坐标，并将其打印到控制台上。

以上就是获取鼠标点击位置坐标的两种方法的完整攻略。接下来，我们来看两个实际应用的示例：

示例一：点击后弹出提示框

我们可以利用获取到的鼠标点击坐标实现鼠标提示功能，具体如下：

document.addEventListener('click', function(e) {
  // 获取鼠标点击坐标
  var x = e.clientX;
  var y = e.clientY;

  // 弹出提示框
  alert('您点击了坐标为(' + x + ',' + y + ')的位置！')
});

上面的代码中，我们在点击事件的回调函数中获取鼠标点击位置的坐标，并将其通过alert弹出提示框的形式展示给用户。

示例二：在点击位置显示标签

我们也可以通过获取到的鼠标点击坐标，在点击位置上显示一个标签，比如实现如下功能：

<body>
  <div id="box" style="width: 200px; height: 200px; position: relative;">
    <div id="tag" style="width: 50px; height: 50px; background: red; position: absolute; display: none;"></div>
  </div>
</body>

document.addEventListener('click', function(e) {
  // 获取鼠标点击坐标
  var x = e.clientX;
  var y = e.clientY;

  // 显示标签
  var tag = document.querySelector('#tag');
  tag.style.left = x + 'px';
  tag.style.top = y + 'px';
  tag.style.display = 'block';
});

上面的代码中，我们在点击事件的回调函数中获取鼠标点击位置的坐标，并将其作为标签的位置，在点击位置上显示出来。需要注意的是，标签需要使用position: absolute进行定位，并且初始需要设置为display: none隐藏，等到需要显示的时候再将其display属性设置为block即可。

以上就是例举的两个应用实例。实际应用中，我们可以根据具体的需求，使用获取到的鼠标点击坐标进行各种巧妙的处理。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JavaScript实现获取鼠标点击位置坐标的方法 - Python技术站