此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

Element:pointermove 事件

基线
广泛可用

自 2020年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

pointermove 事件会在指针坐标变化,并且没有被浏览器的触摸动作取消时触发。此事件也会在指针的其他属性变化时触发,但前提是此变化不会产生其他指针事件。此种情况包括指针的压力、侧向压力、倾斜、轴向旋转、接触面(宽度和高度)和组合按键的任何变化。

如果事件循环中存在具有相同指针 ID 的其他未被派发的 pointermove 事件,pointermove 事件可能会被合并。如果事件被合并了,被派发的事件的 target 会与最后一个被合并的事件相同。关于被合并事件的信息,参见 PointerEvent.getCoalescedEvents() 文档。

此事件与 mousemove 事件非常相似,但拥有更多特性。此事件无论有无指针按键被按下都会触发。此事件能够以极高的速率触发,取决于用户移动指针的速度、机器的运行速度以及其他正在运行的任务和进程等。

pointerrawupdate 与 pointermove 的区别在于它们的触发频率。浏览器可能会推迟 pointermove 事件以改善性能,而 pointerrawupdate 事件则是浏览器能多快频率产生就多快频率派发。对于大多数使用场景,更推荐选择 pointermove 来避免性能问题。

语法

在 addEventListener() 中使用此事件名称:

js
addEventListener("pointermove", (event) => { })

或者,对接口的事件处理器属性赋值:

js
onpointermove = (event) => { }

事件类型

PointerEvent。继承自 Event。

Event UIEvent MouseEvent PointerEvent

使用说明

PointerEvent 类型的事件提供了全部你需要知道的关于用户与定点设备交互的信息,包括位置、移动距离、按钮状态等等。

示例

使用 addEventListener() 为 pointermove 事件添加一个处理器:

js
const para = document.querySelector("p");

para.addEventListener("pointermove", (event) => {
  console.log("指针移动了");
});

也可以使用 onpointermove 事件处理器属性(但请注意,这会替换掉之前使用 onpointermove 添加的其他事件监听器,如存在的话):

js
const para = document.querySelector("p");

para.onpointermove = (event) => {
  console.log("指针移动了");
};

规范

规范
Pointer Events
# pointermove
Pointer Events
# dom-globaleventhandlers-onpointermove

浏览器兼容性

参见