Question

如果在const source = { a: 1, b: 2, c: 3, z: 26 } const copy = { ...source, ...{ b: undefined } } // { a: 1, c: 3, z: 26 }的链接之间移动鼠标，则无法在pointerup的链接（设置了A属性的href标签）上触发event.pointerType == 'mouse'事件pointerdown和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>

如果我按下鼠标按钮，将其按住一段时间，然后释放它，则会得到以下顺序：

使用鼠标指针向下
鼠标指针

但是，如果我按下鼠标按钮，将其保持按下状态，并移动鼠标指针，然后释放它，则会得到以下顺序：

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

问题：指针不触发。

我想这是浏览器中的内置单击或拖动功能（我已经在Chrome中进行了测试）阻止pointerup事件的触发，因为如果在span上执行此操作或从锚链接中删除href，使其按以下顺序工作：

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

此外，它对于触摸驱动的PointerEvents也可以正常工作：

触摸向下指针
触摸移动指针
触摸式指针

我猜想在元素上设置了一个聪明的css属性可以禁用此pointerup预防措施。像a { pointer-actions: click; }之类的东西，但我一直找不到。

Answer 1

D'哦！我基本上说出了问题的答案。是拖动动作阻止了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事件。但这可以通过检查事件clientX和clientY之间的pointerdown / pointerup的差异是否大于一定数量的像素，将其存储在变量中以及添加在这种情况下运行click的{{1}}事件处理程序。

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

1 个答案: