保持HTML5 Canvas在Phonegap App中触摸/滑动事件时滚动整个页面？

Question

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

Answer 1

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