jQuery.event.move 跟踪触摸和鼠标移动 - 文章教程

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

发布于 2020-06-26 字数 3571 浏览 1651 评论 0

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

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

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 任何移动事件都绑定到同一个节点,拖动事件被抑制。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0