\'pointerup\' 事件未在桌面上触发，在移动设备上工作正常答案

【问题标题】：'pointerup' event not firing on desktop, works fine on mobile\'pointerup\' 事件未在桌面上触发，在移动设备上工作正常
【发布时间】：2022-11-04 02:31:47
【问题描述】：

我正在尝试提出一个处理指针事件的跨设备代码。我在 Chrome/Android 上成功运行了这段代码（使用 USB 调试），但 Chrome 桌面刚刚启动并在鼠标释放后继续触发 pointermove。

（另一个问题是动作没有手机上那么流畅）

Playable demo

这些 SO 帖子不能解决我的问题：

【问题讨论】：

标签： javascript pointer-events

【解决方案1】：

“pointerup”事件被分配给#canvas，但这样的事件永远不会发生，因为鼠标实际上是在生成的DIV圆圈上方。
由于您的圈子只是视觉助手，请在 CSS 中设置

.dot {
  /* ... */
  pointer-events: none;
}

另外，请确保在"pointerdown" 上使用Event.preventDefault()。

关于在桌面和移动设备（触摸）上实现无缝体验的其他策略：

仅将"pointerdown" 事件分配给所需的元素（在您的情况下为canvas）
对所有其他事件使用window 对象

编辑示例：

const canvas = document.getElementById('canvas');

function startTouch(ev) {
  ev.preventDefault();

  const dot = document.createElement('div');
  dot.classList.add('dot');
  dot.id = ev.pointerId;
  dot.style.left = `${ev.pageX}px`;
  dot.style.top = `${ev.pageY}px`;
  document.body.append(dot);
}

function moveTouch(ev) {
  const dot = document.getElementById(ev.pointerId);
  if (!dot) return;

  dot.style.left = `${ev.pageX}px`;
  dot.style.top = `${ev.pageY}px`;
}

function endTouch(ev) {
  const dot = document.getElementById(ev.pointerId);
  if (!dot) return;

  removeDot(dot);
}

function removeDot(dot) {
  dot.remove();
}

canvas.addEventListener('pointerdown', startTouch);

addEventListener('pointermove', moveTouch);
addEventListener('pointerup', endTouch);
addEventListener('pointercancel', endTouch);

.dot {
  background-color: deeppink;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  pointer-events: none; /* ADD THIS! */
}

#canvas {
  height: 50vh;
  background-color: black;
  touch-action: none;
}

body {
  margin: 0;
}

&lt;div id="canvas"&gt;&lt;/div&gt;

代码也需要这种改进：

不要在指针移动事件中查询 DOM
使用transform 来移动你的元素而不是top, left 属性

但我不会在这个答案中介绍这些修复。

【讨论】：