JS触摸相对位置

在前端开发中，我们通常需要处理用户的触摸事件。而在触摸事件的处理过程中，我们通常需要得到用户手指相对于某个容器的位置，以便进行相应的处理。本文将介绍如何使用JavaScript获取用户手指的相对位置。

1. 获取触摸事件对象

当用户触摸屏幕时，浏览器会触发相应的触摸事件，比如 touchstart、touchmove、touchend 等事件。我们可以通过监听相应的事件来获取触摸事件对象，从而得到触摸位置的信息。以下是一个简单的示例代码：

const el = document.querySelector('#container');

el.addEventListener('touchstart', e => {
  // 获取触摸事件对象
  const touch = e.touches[0];
});

在上面的代码中，我们首先获取了一个容器元素 #container，并监听它的 touchstart 事件。当事件触发时，我们通过 e.touches 属性获取触摸点的坐标信息，其中 e.touches[0] 表示第一个触摸点的坐标信息。

2. 计算相对位置

得到触摸点的坐标信息后，我们就可以计算出手指相对于容器的位置了。具体来说，我们需要分别获取容器的左上角坐标和触摸点的坐标，然后计算它们之间的差值即可。以下是计算相对位置的代码：

// 获取容器的左上角坐标
const containerRect = el.getBoundingClientRect();
const containerX = containerRect.left;
const containerY = containerRect.top;

// 获取触摸点的坐标信息
const touchX = touch.pageX;
const touchY = touch.pageY;

// 计算相对位置
const relativeX = touchX - containerX;
const relativeY = touchY - containerY;

在上面的代码中，我们首先通过 getBoundingClientRect() 方法获取容器的左上角坐标。然后我们获取触摸点的坐标信息，并计算它们相对容器的距离，最终得到手指相对于容器的位置。

3. 完整代码示例

综合以上的代码，我们可以编写出一个完整的示例：

const el = document.querySelector('#container');

el.addEventListener('touchstart', e => {
  // 获取触摸事件对象
  const touch = e.touches[0];
  
  // 获取容器的左上角坐标
  const containerRect = el.getBoundingClientRect();
  const containerX = containerRect.left;
  const containerY = containerRect.top;

  // 获取触摸点的坐标信息
  const touchX = touch.pageX;
  const touchY = touch.pageY;

  // 计算相对位置
  const relativeX = touchX - containerX;
  const relativeY = touchY - containerY;

  console.log(`相对位置：x=${relativeX}, y=${relativeY}`);
});

在上面的代码中，我们在容器元素 #container 上监听了 touchstart 事件，当事件触发时，我们获取触摸点的位置信息，并基于容器的左上角坐标计算出手指相对于容器的位置。最后，我们通过 console.log() 方法将相对位置的信息输出到控制台中。

4. 总结

本文介绍了如何使用JavaScript获取用户手指的相对位置。首先我们需要监听相应的触摸事件，并获取触摸事件对象。然后我们通过容器的左上角坐标和触摸点的坐标计算相对位置。最后，我们在控制台输出相对位置的信息。