jQuery.event.move 跟踪触摸和鼠标移动

Question

jQuery 特殊事件 movestart、move 和 moveend 用于跟踪触摸和鼠标移动，限制为浏览器动画帧，并显示有关手指距离和速度的信息。

Move events

movestart

当触摸(或鼠标)越过从鼠标向下或触地的位置的阈值距离时，在触摸或鼠标移动后触发。

move

在每个动画帧上触发一个 touchmove 或 mousemove 已经改变了位置。

moveend

在上一次移动事件之后，以及在启动移动的手指已被提起的触摸事件情况下，在鼠标启动或触摸结束之后触发。

使用以下属性增强了 Move 事件对象：

e.pageX, e.pageY

指针的当前页坐标。

e.startX, e.startY

指针在 movestart 处的页面坐标。

e.distX, e.distY

指针自 movestart 以来移动的距离。

e.deltaX, e.deltaY

自上次移动事件以来指针移动的距离。

e.velocityX, e.velocityY

速度(以像素/毫秒为单位)，过去几次事件的平均值。

如何使用

var node = document.querySelector('.mydiv');

// A movestart event must be bound
// and explicitly enabled
node.addEventListener('movestart', function(e) {
  e.enableMove();
});

node.addEventListener('move', function(e) {
  // move .mydiv horizontally
  this.style.left = (e.startX + e.distX) + 'px';
})

node.addEventListener('moveend', function() {
  // move is complete!
});

.enableMove() 是一种必要的性能优化(可以解决DOM缺乏事件检查的问题。

jQuery

jQuery('.mydiv')
.on('move', function(e) {
  // move .mydiv horizontally
  jQuery(this).css({ left: e.startX + e.distX });
})
.on('moveend', function() {
  // move is complete!
});

jQuery 的特殊事件系统负责启用移动事件，因此不需要显式绑定到 movestart。

为什么不直接使用鼠标或触摸事件呢？

是的，你可以。但是，在用鼠标和触摸事件编写这种交互模型时，将事件抽象出需要注意的细节：

• 支持鼠标和触摸设备，为两者公开相同的事件 api。
• 节流阀移动到动画帧，防止不相关的调用。
• 忽略鼠标右键并使用修饰符键单击。
• 防止移动时的文本选择
• 处理多次触摸
• 处理bug(Chrome，可能是所有Android)，其中 ChangedTouch 包含未更改的触点
• 处理浏览器之间的差异，其中 IOS 中的触摸是活动对象，而在 android 中它们是静态的。
• 不与可移动节点内的表单输入进行Bork交互吗？
• 抑制拖放事件。

移动事件是用来帮助构建交互的“构建块”。它们跟踪单个手指或单个鼠标，并在事件对象上公开用于检测手势的属性。

拖曳事件呢？

Move事件的设计是为了补充拖动事件，其中两者的含义不同：拖动事件用于传输数据，而Move事件用于创建交互界面。尽管如此，movestart, move 和 moveend 事件故意回响 dragstart, drag和 dragend 事件，有一个主要区别：drag 事件不断触发，无论您是否移动了指针，move 事件只在指针被移动后才触发，并且仅在动画帧上触发。

其中两个 dragstart 任何移动事件都绑定到同一个节点，拖动事件被抑制。

相关链接

• github 地址：https://github.com/stephband/jquery.event.move
• 官网：http://stephen.band/jquery.event.move/