阻止 HTML5 Canvas 在 Phonegap 应用程序的 touch/swipe 事件中滚动整个页面？

Question

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

问题在于，当用户尝试在 canvas 上使用手指签名而不是在其上绘图时，由于触摸滚动，当他们上下移动时整个页面会滚动。

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

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 就是我所需要的。有什么建议么？

Answer 1

回答我自己的问题 - 我放弃了这种方法，而是将基于 canvas 的签名框放入由 "add signature" 按钮触发的静态（不滚动）模态对话框中.这是一个 hack，但它会向最终用户展示一个签名框，当他们尝试用手指签名时该签名框不会移动。

阻止 HTML5 Canvas 在 Phonegap 应用程序的 touch/swipe 事件中滚动整个页面？

Keep HTML5 Canvas from scrolling entire page on touch/swipe events in Phonegap App?

javascript

canvas

touch

dom-events

phonegap