问题标签 [touchmove]

H1伙计们，我想寻求帮助解决我的问题。所以我有什么：

点击后我有从左到右的滑动面板

我想在单击时将事件侦听器添加到此面板，如果用户TOUCHMOVE我想关闭面板。（如果有人可以帮助捕捉方向（我的意思是从右到左），那将是惊人的！）

我尝试了什么：

！document.addEventLister 不是解决方案，因为它总是在 touchmoving 之后调用它

PS我正在为网站的移动版本写这个

如果有人需要，检查是否检测滑动：

http://www.javascriptkit.com/javatutors/touchevents2.shtml

我有以下代码： -

jQuery

CSS

我正在使用 fullPage.js，这在桌面上运行良好，当我滚动到下一页时隐藏菜单，如果我停止将动画菜单滑回它的固定位置。

在移动设备上，当我向下滚动菜单时按预期隐藏，但导航栏永久消失（即 removeClass("hide-nav-bar") 永远不会触发）。

如果用户停止在移动设备上滚动，有没有办法恢复菜单？

编辑：

实际上，添加e.originalEvent.touches[0].pageY到移动设备上的工作会阻止它在桌面版本上工作。

javascript 中的 Mousemove 事件在每个 tot ms.IsToucmove 事件相同时触发一次？我问这个是因为我看到在 Android 中移动手指非常快，移动是流畅的，而不是 mousemove 不太流畅

我注意到当我快速移动鼠标时会触发 mousemove 事件几次，而不是我移动鼠标的每个像素。这反映在动画上，因为对于这个问题，它们看起来并不流畅。ontouchmove 是否有同样的问题？

我有一个可以向上/向下拖动的元素。如果用户位于页面顶部，则元素（div）将在距离顶部 50px 时停止拖动（如果用户一直滚动到底部，则底部相同）。

问题：如果用户将页面向下滚动一点，那么div可能会被拖出视图。我希望它在从顶部和底部消失之前停止。图片手机屏幕，您可以向上/向下拖动屏幕右侧的一个小框，但不能将其拖出视图，即使您向上/向下滚动页面也是如此。

我知道我需要确定页面是否滚动，然后从文档高度等中减去它，等等......（或类似的东西）。或者也许有一个我不知道的更好的解决方案。

到目前为止，这是使 div可沿 y 轴拖动的内容：

直升机，

这是否可以将 touchmove 事件添加到画布元素，例如：myGamePiece（来自 w3c 学校），以便我可以通过触摸屏幕来移动它？我试过这样的事情：

但控制台日志显示：

无法读取未定义的属性“addEventListener”

问候

在我们的 JavaScript 游戏中，我们遇到了一个问题，即“touchmove”事件缓慢且“不稳定”，直到方向发生变化，此时它们再次变得平滑。

当游戏执行大量工作（例如加载关卡）时，速度会再次出现。

这是一个视频，显示了缓慢的触摸动作，以及解决问题的方向变化。

https://youtu.be/7rSqkJuOQjc

日志中确实出现以下警告

由于主线程正忙，对“touchmove”输入事件的处理延迟了 141 毫秒。考虑将事件处理程序标记为“被动”以使页面更具响应性。

但是，在游戏停止执行繁重的工作（例如加载关卡和构建精灵）后，缓慢的事件仍然存在。

在任何情况下我都不能使用被动处理程序，因为平移地图必须 preventDefault 来停止界面滚动。

我假设缓慢与触摸事件有关，因为我已经测量了触摸处理程序被调用的频率并且它们看起来很奇怪。

将在约 20 毫秒内连续接收 5-10 个事件，然后会有一个大约 150-200 毫秒的事件，然后是另一批快速事件，以及另一批慢速事件。

方向改变后，所有事件都在 20ms 内收到

我还测量了我的 requestAnimationFrame 响应，它们似乎是相当稳定的 16.8 毫秒

对于那些有兴趣的人，您可以在https://blight.ironhelmet.com自己查看问题

这些问题出现在 Chrome 和 Cordova 中，无论是原生的还是使用 Crosswalk 的。在 iOS 上的 Safari 或任何经过测试的桌面浏览器上都不会出现这些问题。

我想知道其他人是否有这个问题以及我如何解决它。

是否可以使用 JavaScript 强制“方向更改”或在方向更改期间发生的任何事情？

在 Safari 10 上，通过定义一个简单的侦听器来阻止touchmove可滚动元素中的默认事件，该事件不会像在 Safari 9 及更低版本中那样被默认阻止（在所有主要浏览器中也是如此）。

这可以在这里重现：http: //codepen.io/anon/pen/PGRxOv

重现步骤：

• 获取具有可滚动内容的元素（溢出：滚动）。
• 为事件添加一个事件侦听器touchmouve，并调用event.preventDefault()该事件侦听器。

预期成绩：

该元素不应该是可滚动的。

实际结果：

该元素在 Safari 10 上仍可滚动。

版本： iOS 10.0.2

可能是 webkit 问题...我在 webkit bug tracker 上打开了一个问题。

同时，如果有人有解决方法（除了阻止touchstart），那就太好了:)

我也尝试return false在侦听器中，但它也不起作用。

我已经为此苦苦挣扎了几天，虽然这个网站上有几个相关的问题，但没有一个问题能准确地告诉我答案。

我的目标是在 phonegap 应用程序中实现在画布上绘图。我的特定 phonegap 应用程序使用 jQuery Mobile 和 Backbone 作为结构，但不确定这是否与此处相关。

此外，我开始尝试遵循本教程：https ://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

在摆脱所有不相关的代码之后，它归结为：

在这个最基本的实现中，我看到了“touchstart”日志消息和“touchend”，但从来没有看到“touchmove”。

我已经尝试了很多方法来完成这项工作，包括：

1）用我在页面上也有的canvas元素替换document.body。

2) 将 e.preventDefault() 添加到 touchstart 处理函数。注意：这会导致错误：“忽略取消使用可取消 = false 的 touchstart 事件的尝试，例如因为滚动正在进行中且无法中断”

请注意，本教程的作者似乎遇到了同样的问题，并且有一个解决方案，我当然尝试过，但这对我不起作用。

重要提示：此外，虽然这是一个移动应用程序，但我在 iPhone 4 的设备仿真模式下在 Chrome 浏览器中进行测试。如果您不在此模式下测试，您将不会遇到同样的问题，因为触摸事件不会甚至在常规网页浏览模式下也不会被触发。

任何帮助将非常感激。谢谢。

所以这是我的问题：

• 使用弹出菜单切换器添加 60px 高度的标题栏
• 在页面上添加足够的内容以滚动当切换弹出菜单时 - 添加 overflow-y: hidden 到 html 和/或 body 和 position: 固定到弹出窗口。
• 想法是，当我打开菜单弹出窗口时 - 我必须只有弹出窗口作为可滚动区域，并且在弹出窗口打开时无法滚动背景

结果：

• 在 iOS (iphone/ipad) 上，背景滚动，尤其是当弹出窗口到达滚动结束时。
• 如果我在标题栏上触摸移动，也在 iOS (iphone/ipad) 上 - 页面仅在背景上滚动
• 滚动后弹出窗口并不总是到达视口的末尾（主要是在 iOS 上）。此问题也部分存在于 Android 设备上。
• 动量效应使头球移动（不应该）。

这是带有代码的片段。

请注意，通过在 codepen 上运行代码是看不到问题的。

我确信这可能会被标记为重复，但经过一周的研究，我仍然没有找到任何解决方案。我不擅长使用原生 js，所以我更喜欢使用 jQuery。

更新：

截至Hieren feb 的回答，我所有的问题都是由 iOS 的 Momentum 滚动的存在引起的。放置位置：激活弹出窗口时固定到主体修复了问题。