Question

我有一个HTML5页面，它看起来像这样：

<html>
<head></head>

<body>
<canvas id="c1" width="500" height="500" />

</body>
</html>

我使用Bootstrap 3和Fabric.js作为画布库。当我在移动设备上运行它时，我遇到了一个问题，当我在画布上触摸对象并移动它时，页面也会被移动。似乎触摸事件也由移动设备浏览器处理。

我期望停止移动设备浏览器的默认事件句柄，所以当我在画布中触摸对象并移动它时，网页也不会移动。如何使用Fabric.js进行此操作？

Answer 1

我制作html时改变了方式：

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">

然后，为防止浏览器默认缩放弹跳，我们可以在文档中绑定“touchmove”并禁用它。这是来自jQuery mobile，但vmousemove = touchmove用于移动设备。

$(document).on("vmousemove", "body", function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                });

这不是关于Fabric.js的，所以我不必更改Fabric.js。

Fabric.js - 触摸事件传播

1 个答案: