Question

我正在使用svg-pencil构建应用以允许用户绘制图像。通常我会使用atrament在画布上启用绘图，但是这个项目要求输出为SVG，然后我可以在<path>级别进行分析。

SVG-pencil很棒，但由于它是在不久前开发的，因此不具备移动性。使用atrament作为指导，我试图让它对触摸事件和鼠标事件做出响应。

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

this.listeners = {
    mousedown: function (ev) { self._onmousedown(ev) },
    mouseup: function (ev) { self._onmouseup(ev) },
    mousemove: function (ev) { self._onmousemove(ev) },
    // added these three lines
    touchstart: function (ev) { self._onmousedown(ev) },
    touchend: function (ev) { self._onmouseup(ev) },
    touchmove: function (ev) { self._onmousemove(ev) }
};

麻烦的是，在移动设备上，touchmove的默认行为是滚动页面。因此，我向模块创建的<svg>元素添加了两个事件侦听器，以尝试阻止它：

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区域内的滚动，但上面注册到mousemove的{{1}}事件不会多次触发。正如你所看到的，我也试过了touchmove而没有运气。

我不是事件冒泡的专家，但不知怎的，似乎对svg元素的preventDefault调用也取消了svg-pencil中的事件。

Here's an example。每个活动都有一个控制台登录。它在常规浏览器中工作正常，但如果您在Chrome的devtools中选择移动模拟器或在Xcode的模拟器中尝试它，则可以看到问题。

完整的，稍加修改的代码为here。

我也尝试在svg-pencil的事件监听器中添加stopPropogation而没有运气。

谢谢！

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

0 个答案: