移动端js问题,怎么不禁止Touch禁止文档被拖拽?

自己做了一个js的Touch小游戏。不过现在出现了一个非常烦人的问题。

如图红色框框所示,该怎么避免。
首先找到了一个在body中添加,onmousewheel=“return false”这个事件,不过经过测试,这个事件就对PC端有效果,
然后找到的是将小游戏的canvas position设置成 fixed。问题来了,由于fixed的设定导致了 canvas 的位置是相对于屏幕了,不跟随文档流,破坏了页面结构。
接着找到的解决方案是将Touch事件remove,很明显,一个基于Touch的小游戏,怎么可能remove掉Touch。

那么现在所要寻求的解决目的是:
既不能禁止Touch,又不能使用fixed,还要保证至少在小游戏的canvas界面上,手指任意滑动不会造成像图片中那要,出现红色框框的区域,说白了,就是让页面不动。
我的页面保证了如下几点:
游戏页面是在iPad上测试的,iPad上有足够大的空间容下游戏的canvas,所以不存在canvas溢出屏幕被迫造成屏幕滚动。
其次,即便是因为溢出滚动,我所希望的是往溢出的方向滚动,不应该出现上面压根没有内容的地方。

最后,我整个小游戏都没有使用jQuery,所以,也不想为了解决这一个小问题引用一个jQuery。如果就是迫不得已,还是希望大神们能够贴出用到jQuery中哪一小段代码(开发版的不是那个min)。

canvas的小游戏现在不计其数,我认为解决这个问题根本就不会很难。。。。

大神们 拜托了。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注