如何使用JavaScript检测手指滑出屏幕的操作？

针对你遇到的pointerleave误触发、触摸移动事件提前终止的问题，可以通过以下几种方式实现可靠的边缘滑出检测：

1. 基于滑动状态+位置的联合判断 #

核心思路是区分滑动操作和点击/抬起操作，结合最后一次有效触摸位置与屏幕边缘的距离来判定：

• 记录手指按下的初始位置，在触摸移动时标记滑动状态（当移动距离超过微小阈值时认定为滑动）；
• 当pointerleave触发时，检查是否处于滑动状态，且最后一次记录的触摸位置靠近屏幕边缘（对应事件停止触发的阈值，比如你遇到的10px）；
• 点击或抬起操作不会触发滑动状态标记，因此可以有效区分。

代码示例：

let isSliding = false;
let lastPointerPos = { x: 0, y: 0 };
const EDGE_THRESHOLD = 10; // 适配你观察到的事件停止触发距离

document.body.addEventListener('pointerdown', (e) => {
  isSliding = false;
  lastPointerPos = { x: e.clientX, y: e.clientY };
});

document.body.addEventListener('pointermove', (e) => {
  // 移动距离超过5px则标记为滑动状态
  const moveDistance = Math.sqrt(
    Math.pow(e.clientX - lastPointerPos.x, 2) +
    Math.pow(e.clientY - lastPointerPos.y, 2)
  );
  if (moveDistance > 5) {
    isSliding = true;
  }
  lastPointerPos = { x: e.clientX, y: e.clientY };
});

document.body.addEventListener('pointerleave', (e) => {
  const isNearEdge = 
    lastPointerPos.x <= EDGE_THRESHOLD ||
    lastPointerPos.x >= window.innerWidth - EDGE_THRESHOLD ||
    lastPointerPos.y <= EDGE_THRESHOLD ||
    lastPointerPos.y >= window.innerHeight - EDGE_THRESHOLD;

  if (isSliding && isNearEdge) {
    console.log('手指滑出屏幕边缘');
    // 这里执行你的滑出逻辑
  }
  isSliding = false; // 重置状态
});

2. 结合pointerout与触摸结束事件辅助校验 #

• pointerout会在手指离开当前元素但仍在屏幕内时触发，而pointerleave是离开视口时触发，两者结合可以排除部分误判；
• 在touchend事件中记录抬起位置，如果抬起位置远离边缘，则直接排除滑出行为的可能。

3. 动态适配设备阈值 #

不同设备的触摸事件停止触发的边缘距离可能不同，你可以通过首次触摸移动的终止位置动态设置阈值：

• 监听touchmove的事件，当连续一定时间未触发时，记录最后位置与边缘的距离，作为当前设备的EDGE_THRESHOLD。

内容的提问来源于stack exchange，提问作者Leo Jiang