问题标签 [touchmove]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
470 浏览

javascript - 捕获“touchmove”事件时访问触摸历史记录

我正在尝试学习如何在浏览器中使用touchmove事件来检测多点触控手势。当一个 touchmove 事件被捕获时,我可以获得当前触摸点的列表。然而,这对于检测手势不是很有用。我喜欢获取触摸事件的历史。例如,我想获取每个当前不同接触点之前的最后 10 个接触点(如果可用)的列表。我画了下图,试图形象化我所追求的:

在此处输入图像描述

正如我在这个场景中所说的那样,用户在屏幕上以两种不同的模式(来自不同手的手指)拖动两个单独的手指,我在touchmove事件中只收到两个触摸点。是否可以访问两个点在到达A点和B点之前的位置的历史记录?

touchmove以下是用于捕获事件的相关代码:

请不要推荐第三方库——我的目标是学习如何定义和检测我自己的自定义真正的多点触控手势。

0 投票
3 回答
4206 浏览

ipad - 惯性滚动时如何同步两个元素的滚动偏移量

我需要使一个元素的滚动偏移量与另一个元素(实际上是窗口)保持同步,而在移动 Safari(iPad)上滚动的惯性“滚降”阶段,我无法做到这一点。

我有几个 div,position:fixed; overflow:hidden我需要保持它们的滚动偏移与窗口的同步(意味着整个身体滚动。)通常我会这样编码(jQuery):

但是在 iPad 上测试界面时,我注意到 div 在触摸阶段(用手指拖动虚拟页面时)都没有更新,也没有在惯性阶段(当您放手并且页面减速到一站。

我通过注册事件的处理程序以及touchmove事件处理程序来解决拖动阶段的问题scroll

但是我找不到解决惯性阶段问题的方法。div 保持静止(并慢慢与页面的其余部分不同步),直到惯性运动完全停止,此时滚动事件最终被触发并跳入位置。

这是一个工作演示。

尝试在 iPad 上滚动它以查看“惯性滑行”问题。不幸的是,由于 iPad 在 iframe 滚动方面的奇怪行为,我无法让它在 jsFiddle 上运行。

如果我可以在那个阶段运行轮询,我可以在两个元素之间保持同步。我已经尝试过setTimeout,setIntervalrequestAnimationFrame,但在惯性滚动阶段它们都不会触发。似乎所有 Javascript 在那个阶段都停止了。

问题:

  • 在惯性滚动阶段是否触发了任何触摸或滚动事件?
  • 没有办法在那个阶段运行 Javascript 回调?
  • 有没有办法使用 CSS 或 JS 以外的其他技术同步两个元素(X 或 Y,不是两者)的滚动偏移量?
0 投票
1 回答
1112 浏览

jquery - iOS touchmove 事件 - 改变 backgroundPosition 不顺畅

我正在尝试创建简单的视差效果来改变背景位置,但在 iOS Safari 中移动并不顺畅。只有当我释放触摸屏时背景才会改变它的位置,但当我滚动它时不会改变它的位置。

Javascript:

它实际上不仅发生在 chnagingbackgroundPosition中,还发生在topfor div 元素中:

但同时margin-top工作正常,运动平稳。

我做错了什么,如何让它以与鼠标滚轮事件相同的方式在 iOS 上工作?

0 投票
2 回答
6141 浏览

javascript - html5 canvas - touchmove - 如何计算速度和方向?

所以我想测量用户在 html5 画布上滑动的速度和方向?

似乎应该已经写了一些东西来做到这一点,所以我不必重新发明轮子,但我找不到任何东西。有人知道 JavaScript 函数吗?

如果我必须自己做,我在想:

  • 抓取触摸事件 x 和 y,将它们存储在数组变量中
  • 计算2点之间的斜率(如果斜率不同,可能会平均)
  • 不知道如何测量速度,也许是点之间的距离?

还有其他想法吗?

这是我的画布和我的形状,它监听触摸事件。当触摸我的 iphone 或 iphone 模拟器时,我通常会收到 1 或 2 个事件。我看坐标。我正在使用 kineticjs 作为舞台和形状。

要尝试它,请在您的 iPhone 中访问此 url,然后将手指放在圆圈上并将其推到某个地方。(或者如果你有 ios 模拟器,你也可以使用它)

这是我的小提琴:http: //jsfiddle.net/jnylund/uRgZZ/16/

谢谢乔尔

0 投票
2 回答
408 浏览

javascript - Touchmove 不适用于 Google 应用脚本 html 服务

我试图让touchmove事件注册到一个使用 Google 应用脚本 html 服务编写的简单网络应用程序,以便我可以制作在 iPad 和桌面上运行的简单网络应用程序。

我所做的只是首先加载一个网页,它按预期工作:

然后我在 html 页面上创建了一个简单的画布:

这只是我尝试过的最新变体。在此示例中,绑定click或全部在桌面上正常工作。但是,在 iPad 上尝试 或不做任何事情。我已经在 iPad 上使用 Chrome 和 Safari 进行了测试。mousedownmousemovetouchstarttouchmove

我也尝试过添加类似的东西:

并有一个调用 的简单函数preventDefault(),但这也无济于事。

我做错了什么,还是因为它是谷歌应用程序脚本 html 服务而必须做一些不同的事情?

我现在已经尝试过使用 jQuery(刚刚阅读了如何做),但它似乎仍然无法在 iPad 上正常工作:

mousedown事件运行良好,并且它可以通过触摸来工作 - 事实上,它似乎mousedownmouseupiPad 上的触摸相关联。但是mousemove不起作用,touchmoveor touchstartor也不起作用touchend。如上所示,我已经尝试过使用 bind 和更直接的方法。

我做错了什么来完成这项工作吗?

0 投票
4 回答
12957 浏览

javascript - 如果 touchmove 触发,则取消 touchend

我正在构建一些主要用于平板电脑的东西,用户可以在屏幕上点击一个项目并将一个类应用于它。这是我到目前为止所拥有的:

问题:

  1. 我想使用触摸事件来删除类并在触摸端添加类(以使其更快)。
  2. 如果用户滑动(触摸移动),我不希望它做任何事情。

我已经尝试了很多东西,但都没有奏效。我尝试过的最简单的(不成功)是这样的:

0 投票
1 回答
3787 浏览

javascript - 如何使用 touchmove 来补充 android 的 mousemove

在尝试补充使用鼠标移入也可以在智能手机上工作的工作功能时,我应该注意哪些差异。

到目前为止,我已经了解到在我的 android 上我得到了

  • touchmove insted of mousemove,
  • touchstart 安装了 mousedown,
  • 安装了 mouseup 的 touchend
  • event.touches[0].pageX insted of event.clientX
  • event.touches[0].pageY insted of event.clientY

但这还不够,代码仍然行为不端,我还应该学习什么才能让它工作?

示例:http : //paint.puggan.se/paint/paint_201305311921.html

当您从同一组中的一个点拖动到另一个点时,它会在它们之间添加一条黄线。在仍然将其绘制到最近的蓝线时,如果您拖动关闭或停止(鼠标向上),它会添加黄线。

以上适用于我的计算机的 Firefox 中的鼠标。

以上不适用于我的android,我可以看到蓝线,但从来没有任何黄线

0 投票
1 回答
1145 浏览

jquery - 在 iPad 上工作的 mousedown 上的 jquery mousemove

在一个 div 中,我有三个绝对 div,它们应该在我的容器中滚动以获得小的视差效果。我做了一个函数来跟踪e.pageX鼠标按下时的偏移量。如果鼠标在拖动之前出现,我将其注册为单击事件(检查是否有人单击了屏幕的左侧或右侧)。

问题:这在 iPad 上不起作用。我尝试了很多我在这个网站上找到的解决方案,但我无法让它工作。

你们能指出我在 iPad 上的工作功能吗?

0 投票
1 回答
1123 浏览

ios - touchmove 和 mousemove 防止 iPad 上的垂直滚动

我一直在为一个学校项目开发一个 iOS iPad 应用程序,它使用jQuery.touchSwipe.min.js允许用户在页面之间水平滑动的代码。

但是,我发现它阻止了高度大于 iPad 屏幕的内容的上下滚动。如果我从 jQuery.touchSwipe.min.js 中删除这段代码“touchmove”:“mousemove”,我可以再次获得垂直滚动效果,但是页面之间的水平滑动停止了!

如何在页面上垂直滚动时保持页面之间的水平滑动?

0 投票
1 回答
395 浏览

javascript - 缩放图像后触摸移动事件不会触发(scale3d)

正如您在此处看到的那样:http: //jsfiddle.net/hWm9M/1/ 通过一段touchmove时间的图像缩放,您可以在控制台中验证touchmove 事件是否按预期附加。但是当完全缩放时,事件不会触发。我试图在 transitionend 上附加事件,但它也没有工作。

这是代码:

任何的想法?