Element.setPointerCapture() - Web API 接口参考 编辑

指针捕获概述

Element接口的setPointerCapture() 方法用于将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标,直到捕获被释放(通过Element.releasePointerCapture())。

一旦设置了pointer capture,  pointerover, pointerout pointerenter, 和pointerleave  事件将不会被触发,直到越过设置了capture的元素的边界。这是因为其他元素将不能再作为pointer事件的目标了。这会影响到这些事件在其他元素上的触发。 指针捕获允许一个特定的指针事件(PointerEvent) 事件从一个事件触发时候的目标重定位到另一个目标上。这个功能可以确保一个元素可以持续的接收到一个pointer事件,即使这个事件的触发点已经移出了这个元素(比如,在滚动的时候)。

语法

targetElement.setPointerCapture(pointerId);

参数

pointerId
PointerEvent 对象的pointerId

返回值

返回void。如果pointerId不匹配任何当前活动的指针事件,将抛出DOMException

示例

当您按下它时,此示例在 <div> 上设置指针捕获。这使您可以滑动元素,即使指针移动到其边界之外也是如此。

HTML

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

CSS

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

JavaScript

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;

结果

规范

标准状态备注
Pointer Events – Level 2
setPointerCapture
Recommendation不稳定版本
Pointer Events
setPointerCapture
Obsolete初版

浏览器兼容性

BCD tables only load in the browser

参见

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:63 次

字数:5476

最后编辑:7 年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文