JavaScript事件坐标终极指南：一切尽在掌握

没头发的卓卓
389 阅读8分钟

​

事件坐标属性

事件对象包含了一系列的坐标属性，这些属性提供了不同坐标系下的位置信息：

  • clientX/clientY（相对于浏览器） ：

    • 这两个属性提供了事件发生时，鼠标指针在可视窗口（viewport）中的水平（X）和垂直（Y）坐标。
    • 它们不包括页面滚动带来的偏移，即它们的坐标原点为浏览器窗口的左上角。

  • 通俗的讲：

    • 想象你的浏览器窗口是一个画框，clientX和clientY告诉你鼠标指针在这个画框内的具体位置。如果你在画框里面放了一幅很长的画（也就是一个很长的网页），并且你移动这幅画来查看不同部分（滚动网页），clientX/clientY只关心鼠标指针在画框内的位置，而不关心画移动到了哪里。

  • pageX/pageY（相对于网页） ：

    • 这两个属性提供了事件发生时，鼠标指针在页面坐标系中的水平（X）和垂直（Y）坐标。
    • 它们包括了页面滚动带来的偏移，即它们的坐标原点为页面本身的左上角。

  • 通俗的讲：

    • pageX和pageY也是告诉你鼠标指针在画框内的位置，但是它们会考虑画移动的情况。也就是说，如果你滚动了网页，pageX/pageY会告诉你鼠标指针在整幅画上的位置，而不仅仅是画框内的位置。

  • screenX/screenY（相对于屏幕） ：

    • 这两个属性提供了事件发生时，鼠标指针在屏幕坐标系中的水平（X）和垂直（Y）坐标。
    • 它们的坐标原点为屏幕的左上角，与浏览器窗口和页面滚动无关。

  • 通俗的讲：

    • screenX和screenY则是告诉你鼠标指针在整个屏幕上的位置。想象你的电脑屏幕是一个巨大的画布，上面可以放置多个画框（多个浏览器窗口）。screenX/screenY会告诉你鼠标指针在这个巨大画布上的具体位置，不管鼠标指针在哪个画框内，也不管画框里的画（网页）移动到了哪里。

使用事件坐标

在JavaScript中，你可以通过事件监听器来获取这些坐标。例如，当你为一个元素添加了mousedown事件监听器时，你可以通过事件对象访问clientX和clientY属性：

element.addEventListener('mousedown', function(event) {
  console.log('Client coordinates: ' + event.clientX + ', ' + event.clientY);
});

类似地，你可以为触摸事件监听touchstart、touchmove和touchend事件，并通过事件对象的touches属性获取触摸点的坐标：

element.addEventListener('touchstart', function(event) {
  var touch = event.touches[0];
  console.log('Touch coordinates: ' + touch.clientX + ', ' + touch.clientY);
});

注意事项

  • 兼容性：虽然大多数现代浏览器都支持上述属性，但是在旧的或特定的浏览器中可能会有不同的表现。在使用这些属性时，最好检查一下浏览器的兼容性。
  • 页面滚动：如果你需要获取相对于页面的坐标，而不是可视窗口，那么应该使用pageX和pageY。如果这些属性不可用，你可能需要自己计算滚动偏移。
  • 事件类型：不同的事件类型（如鼠标事件和触摸事件）可能会提供不同的事件对象属性。确保你使用的是适合你事件类型的属性。

它们之间的关系

  • 视图坐标与页面坐标：页面坐标可以通过视图坐标加上页面的滚动偏移来计算得到。如果页面没有滚动，那么视图坐标和页面坐标是相同的。
  • 屏幕坐标与视图坐标：屏幕坐标通常比视图坐标大，因为它包括了浏览器窗口外的屏幕区域。视图坐标可以通过屏幕坐标减去浏览器窗口的边界位置来计算得到。

事件坐标的获取

在JavaScript中，你可以通过监听不同的事件类型来获取事件坐标。以下是一些常见的事件类型及其对应的坐标获取方式：

鼠标事件

  • mousedown：鼠标按钮被按下。
  • mousemove：鼠标在元素内部移动。
  • mouseup：鼠标按钮被释放。
// 为元素添加mousedown事件监听器
element.addEventListener('mousedown', function(event) {
  console.log('MouseDown at coordinates: ' + event.clientX + ', ' + event.clientY);
});

// 为元素添加mousemove事件监听器
element.addEventListener('mousemove', function(event) {
  console.log('MouseMove at coordinates: ' + event.clientX + ', ' + event.clientY);
});

// 为元素添加mouseup事件监听器
element.addEventListener('mouseup', function(event) {
  console.log('MouseUp at coordinates: ' + event.clientX + ', ' + event.clientY);
});

触摸事件

  • touchstart：触摸点开始接触触摸屏。
  • touchmove：触摸点在触摸屏上移动。
  • touchend：触摸点停止接触触摸屏。
// 为元素添加touchstart事件监听器
element.addEventListener('touchstart', function(event) {
  var touch = event.touches[0];
  console.log('TouchStart at coordinates: ' + touch.clientX + ', ' + touch.clientY);
});

// 为元素添加touchmove事件监听器
element.addEventListener('touchmove', function(event) {
  var touch = event.touches[0];
  console.log('TouchMove at coordinates: ' + touch.clientX + ', ' + touch.clientY);
});

// 为元素添加touchend事件监听器
element.addEventListener('touchend', function(event) {
  // 在touchend事件中，touches数组为空，因此需要使用changedTouches
  var touch = event.changedTouches[0];
  console.log('TouchEnd at coordinates: ' + touch.clientX + ', ' + touch.clientY);
});

在这些代码示例中，event对象包含了关于事件的信息，包括事件发生的坐标。对于触摸事件，event.touches数组包含了所有当前接触触摸屏的触摸点，而event.changedTouches包含了自上次触摸事件以来发生变化的触摸点。

坐标转换

在Web开发中，坐标转换是指将一个坐标系统中的点转换为另一个坐标系统中的点的过程。例如，将视图坐标（相对于浏览器窗口的坐标）转换为页面坐标（相对于整个网页的坐标）是一种常见的转换。

视图坐标转换为页面坐标

视图坐标是相对于浏览器窗口的左上角的，而页面坐标是相对于整个网页的左上角的。当你需要将视图坐标转换为页面坐标时，你需要加上页面的滚动偏移。

以下是如何使用JavaScript进行这种转换的示例代码：

// 假设我们有一个鼠标事件的event对象
var event = {
  clientX: 100, // 视图中的X坐标
  clientY: 150  // 视图中的Y坐标
};

// 计算页面滚动偏移
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var scrollY = window.pageYOffset || document.documentElement.scrollTop;

// 将视图坐标转换为页面坐标
var pageX = event.clientX + scrollX;
var pageY = event.clientY + scrollY;

console.log('Page coordinates: ' + pageX + ', ' + pageY);
//这种写法确保了代码在不同浏览器中的兼容性，因为不同的浏览器可能使用不同的属性来表示页面的垂直滚动位置。通过这种方式，无论在哪种浏览器上，代码都能正确地获取到当前页面的垂直滚动位置。

说明：var scrollX = window.pageXOffset || document.documentElement.scrollLeft;  这里的 scrollX是超出范围，不被浏览器显示的部分

页面坐标转换为视图坐标

将页面坐标转换为视图坐标是坐标转换的逆过程。你需要从页面坐标中减去页面的滚动偏移。

// 假设我们有一个页面坐标
var pageX = 300; // 页面中的X坐标
var pageY = 400; // 页面中的Y坐标

// 计算页面滚动偏移
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var scrollY = window.pageYOffset || document.documentElement.scrollTop;

// 将页面坐标转换为视图坐标
var clientX = pageX - scrollX;
var clientY = pageY - scrollY;

console.log('Client coordinates: ' + clientX + ', ' + clientY);

注意事项

  • 在进行坐标转换时，确保考虑了页面的滚动偏移。
  • pageXOffset和pageYOffset是window对象的属性，而scrollLeft和scrollTop是document.documentElement的属性。这样做是为了兼容不同的浏览器。
  • 在一些现代浏览器中，event对象可能已经提供了pageX和pageY属性，这使得转换变得不必要。但在不支持这些属性的浏览器中，上述转换方法是必要的。

实际应用场景

拖放功能

在实现拖放功能时，我们需要跟踪鼠标的位置来移动元素。

// 定义一个变量来存储被拖动的元素
let dragElement = null;

// 监听mousedown事件来开始拖动
document.addEventListener('mousedown', function(event) {
  if (event.target.classList.contains('draggable')) {
    dragElement = event.target;
    dragElement.offsetX = event.offsetX;
    dragElement.offsetY = event.offsetY;
  }
});

// 监听mousemove事件来移动元素
document.addEventListener('mousemove', function(event) {
  if (dragElement) {
    dragElement.style.left = (event.clientX - dragElement.offsetX) + 'px';
    dragElement.style.top = (event.clientY - dragElement.offsetY) + 'px';
  }
});

// 监听mouseup事件来停止拖动
document.addEventListener('mouseup', function(event) {
  dragElement = null;
});

绘图应用

在绘图应用中，我们通常需要跟踪触摸或鼠标移动来绘制线条或形状。

// 假设我们有一个canvas元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 定义一个变量来存储是否在绘制
let isDrawing = false;

// 监听mousedown事件来开始绘制
canvas.addEventListener('mousedown', function(event) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(event.clientX, event.clientY);
});

// 监听mousemove事件来绘制线条
canvas.addEventListener('mousemove', function(event) {
  if (isDrawing) {
    ctx.lineTo(event.clientX, event.clientY);
    ctx.stroke();
  }
});

// 监听mouseup事件来停止绘制
canvas.addEventListener('mouseup', function() {
  isDrawing = false;
});

// 监听mouseleave事件来停止绘制
canvas.addEventListener('mouseleave', function() {
  isDrawing = false;
});

游戏

在游戏中，事件坐标用于确定玩家的位置、移动方向、点击目标等。

// 假设我们有一个游戏角色
const gameCharacter = document.getElementById('game-character');

// 监听键盘事件来移动游戏角色
document.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowUp':
      gameCharacter.style.top = (parseInt(gameCharacter.style.top) - 10) + 'px';
      break;
    case 'ArrowDown':
      gameCharacter.style.top = (parseInt(gameCharacter.style.top) + 10) + 'px';
      break;
    case 'ArrowLeft':
      gameCharacter.style.left = (parseInt(gameCharacter.style.left) - 10) + 'px';
      break;
    case 'ArrowRight':
      gameCharacter.style.left = (parseInt(gameCharacter.style.left) + 10) + 'px';
      break;
  }
});

// 监听click事件来攻击敌人
document.addEventListener('click', function(event) {
  // 假设我们有一个函数来处理攻击逻辑
  handleAttack(event.clientX, event.clientY);
});

在这些示例中，事件坐标被用来确定用户交互的位置和方向，从而实现拖放、绘图和游戏逻辑。这些应用场景展示了事件坐标在实际开发中的重要性，特别是在创建交互式和动态的用户界面时。

​

avatar
文章
阅读
粉丝