Javascript 如何在禁用滚动的同时在移动元素中启用touchmove

我正在开发一个应用程序，允许用户绘制图像。通常我会使用它来启用在画布上绘制，但是这个项目要求输出是一个SVG，然后我可以在

级别进行分析

SVG pencil非常棒，但由于它是在一段时间前开发的，所以不适合移动。使用atrament作为指南，我试图使它对触摸事件和鼠标事件都有响应

第一步是将触摸事件监听器添加到svg pencil的以下部分：

问题在于，在手机上，

touchmove

的默认行为是滚动页面。因此，我在模块创建的

元素中添加了两个事件监听器，以尝试防止出现这种情况：

var svg = p.element;

svg.addEventListener('touchmove', function(e) {
    e.stopImmediatePropagation();
    // e.preventDefault();
});

svg.addEventListener('touchstart', function(e) {
    e.stopImmediatePropagation();
    // e.preventDefault();
});

如果只需单击可绘制区域，即可在移动仿真器或真实手机中成功触发应用程序的

mousestart

和

mouseend

事件，如果在svg区域内拖动，则会成功禁用svg区域内的滚动，但是上面注册到

touchmove

的

mousemove

事件不会触发多次。如您所见，我也尝试了

preventDefault

，但没有成功

我不是事件冒泡方面的专家，但不知何故，svg元素上的

stopPropogation

调用似乎也在取消svg铅笔中的事件

。每个事件都有一个控制台日志。它在普通浏览器中运行良好，但如果您在Chrome的devtools中选择移动仿真器，或者在Xcode的仿真器中尝试，则可以看到问题

完整的、稍加修改的代码是

---

我还尝试在svg pencil的事件侦听器中添加

preventDefault

。

注意：我将svg pencil换成了Art svg，这是为了在新的移动浏览器中调整一些坐标检测。PR提交：但如果有人能够解决最初的问题，我仍然想更好地理解事件冒泡。谢谢你解决了吗？

var svg = p.element;

svg.addEventListener('touchmove', function(e) {
    e.stopImmediatePropagation();
    // e.preventDefault();
});

svg.addEventListener('touchstart', function(e) {
    e.stopImmediatePropagation();
    // e.preventDefault();
});