时间戳

首页 > 解决方案 > 阻止 HTML5 Canvas 在 Phonegap App 中的触摸/滑动事件上滚动整个页面？

javascript - 阻止 HTML5 Canvas 在 Phonegap App 中的触摸/滑动事件上滚动整个页面？

问题描述

在我的 phonegap 应用程序中，我在长长的文本页面末尾有一个使用画布的签名框，无论设备 iPhone 或 iPad 或方向如何，它都会垂直滚动。页面只是比视口要高。

问题在于，当用户尝试在画布上使用手指而不是在画布上进行签名时，由于触摸滚动，当他们上下移动时，整个页面都会滚动。

我怎样才能避免这种情况？这是我到目前为止所做的。（注意画布宽度是根据视口动态分配的）

HTML：

<div id="canvas-container">
<canvas id="paintCanvas" width="600" height="158"></canvas>
</div>

Javascript/JQuery：

var mycanvas = $("#paintCanvas");
mycanvas.addEventListener("touchstart",  function(event) {event.preventDefault()})
mycanvas.addEventListener("touchmove",   function(event) {event.preventDefault()})
mycanvas.addEventListener("touchend",    function(event) {event.preventDefault()})
mycanvas.addEventListener("touchcancel", function(event) {event.preventDefault()})

我在 iOS 和 Android 上遇到了类似的行为。我是否需要像 swipeUp 一样捕捉另一个事件？我认为 touchstart 和 touchmove 将是我所需要的。有什么建议么？

标签： javascriptcanvastouchphonegapdom-events

解决方案

回答我自己的问题 - 我放弃了这种方法，而是将基于画布的签名框放入由“添加签名”按钮触发的静态（不滚动）模式对话框中。这是一个 hack，但它为最终用户提供了一个签名框，当他们尝试用手指签名时，该签名框不会移动。

推荐阅读