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

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

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

1 个答案: