当检测到 pointermove 时，不会针对链接上的鼠标操作触发 pointerup 事件

Posted 2023-02-24

【中文标题】当检测到 pointermove 时，不会针对链接上的鼠标操作触发 pointerup 事件

【英文标题】：pointerup event does not fire for mouse actions on a link when pointermove has been detected

【发布时间】：2018-09-12 10:15:14

【问题描述】：

如果鼠标在pointerdown 和pointerup 之间移动，我无法在event.pointerType == 'mouse' 的链接（带有href 属性集的A 标记）上触发pointerup 事件。

我有以下场景：

var lastEvent = false;
var handler = function (e) 
  if (lastEvent != e.type) 
    e.target.innerhtml += e.type + ' with ' + e.pointerType + '<br/>';
    e.target.scrollTo(0, e.target.scrollHeight);
  
  lastEvent = e.type;

document.querySelector('a').addEventListener('pointerdown', handler);
document.querySelector('a').addEventListener('pointermove', handler);
document.querySelector('a').addEventListener('pointerup', handler);

div 
  height: 100vh;
  display: flex;

a 
  height: 60vh;
  width: 75vw;
  margin: auto;
  background-color: red;
  display: inline-block;
  user-select: none;
  touch-action: none;
  overflow-y: scroll;

<div>
    <a href="#"></a>
</div>

如果我按下鼠标按钮，按住它一段时间然后释放它，我会得到这个序列：

用鼠标向下指针 鼠标指针

但是，如果我按下鼠标按钮，按住它并移动鼠标指针，然后释放它，我会得到这个序列：

用鼠标向下指针 用鼠标移动指针

问题：pointerup 永远不会触发。

我猜是浏览器中的内置点击或拖动功能（我在 Chrome 中测试过）阻止了 pointerup 事件触发，因为如果在 span 上执行此操作或删除 @ 987654332@ 来自它与此序列一起使用的锚链接：

用鼠标向下指针 用鼠标移动指针 鼠标指针

此外，它完美适用于触摸驱动PointerEvents：

指针向下触摸 指针通过触摸移动 触摸指针

我猜想在元素上设置一个巧妙的 css 属性来禁用 pointerup 预防。 a pointer-actions: click; 之类的东西，但我找不到。

【参考方案1】：

天啊！基本上，我在问题中陈述了答案。 拖动操作阻止了pointerup 事件的触发。只需在链接元素上添加draggable="false" 属性即可解决此问题。

<a href="#" draggable="false"></a>

概念证明：

var lastEvent = false;
var handler = function (e) 
  if (lastEvent != e.type) 
    e.target.innerHTML += e.type + ' with ' + e.pointerType + '<br/>';
    e.target.scrollTo(0, e.target.scrollHeight);
  
  lastEvent = e.type;

document.querySelector('a').addEventListener('pointerdown', handler);
document.querySelector('a').addEventListener('pointermove', handler);
document.querySelector('a').addEventListener('pointerup', handler);

div 
  height: 100vh;
  display: flex;

a 
  height: 60vh;
  width: 75vw;
  margin: auto;
  background-color: red;
  display: inline-block;
  user-select: none;
  touch-action: none;
  overflow-y: scroll;

<div>
    <a href="#" draggable="false"></a>
</div>

唯一的缺点是draggable 设置为false，所有mousedown-mousemove-mouseup 都会触发click 事件。但这可以通过检查pointerdown 和pointerup 事件之间clientX/clientY 的差异是否大于一定数量的像素，将其存储在变量中并添加click 事件处理程序来防止在这种情况下运行e.preventDefault(); e.stopPropagation();。