指针事件 javascript-解网

问：

usePointerCapture 和 releasePointerCapture 实际上对指针事件做了什么，这些方法的用途是什么以及如何使用它们

一些文档，如 mdn 并没有详细解释它

JavaScript 事件事件处理

function beginSliding(e) {
  slider.onpointermove = slide;
}

function stopSliding(e) {
  slider.onpointermove = null;
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

const slider = document.getElementById("slider");

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;

div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}

<div id="slider">SLIDE ME</div>

通过使用 setPointerCapture，我们可以捕获所有指针事件（甚至在目标 div 之外），直到我们使用 releasePointerCapture 释放它们。

如果我们将其应用到我们的示例中，我们可以看到即使我们离开 div，盒子也会保持平稳移动。

function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

const slider = document.getElementById("slider");

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;

div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}

<div id="slider">SLIDE ME</div>

上一个：Vaadin：如何让TextField按键事件在网格标题中触发？

下一个：有没有办法使用我们在mixpanel中跟踪时发送的自己的属性编写公式？

指针事件 javascript

Pointer event javascript

评论