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

发布于 2020-06-26 09:26:08 字数 2862 浏览 1881 评论 0

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, movemoveend 事件故意回响 dragstart, dragdragend 事件,有一个主要区别:drag 事件不断触发,无论您是否移动了指针,move 事件只在指针被移动后才触发,并且仅在动画帧上触发。

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

相关链接

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

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

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