Question

我创建了一个显示SVG元素（嵌入在HTML中）的网站，并希望允许用户通过用鼠标或手指拖动它们来连接点（<circle>元素）。

通过聆听mousedown和mouseover事件并将line元素添加到SVG，这在桌面上完美运行。

我向touchstart，touchmove，touchend和touchcancel添加了听众，但我遇到了问题。似乎永远不会在我的Android手机上的谷歌浏览器上触发touchmove，在我的Android平板电脑上的谷歌浏览器上触发{{1}}只会在我移开手指时触发。

编辑：这是我的小提琴代码：http://jsfiddle.net/s5vcfzbq/您可以将鼠标从圆圈拖动到圆圈以连接它们，但它在触摸屏上不起作用。

Answer 1

我建议InteractJS来处理触摸事件。它没有任何依赖关系，并处理拖动，旋转和多点触摸等。

interact('.drag-and-resize').draggable({
   snap: {
   targets: [
    { x: 100, y: 200 },
    function (x, y) { return { x: x % 20, y: y }; }
   ]}
}).resizable({
    inertia: true
});

这是我使用SVG <{3}}拼凑在一起的演示

Answer 2

您可以尝试这个简单的解决方法（来自 this answer）：

向容器 'touchstart' 元素添加一个 <svg> 事件侦听器，并带有一个 noop 处理程序：

document.querySelector('svg').addEventListener('touchstart', () => {});

现在您的 <circle> 元素应该能够可靠地触发触摸事件。

在svg元素中检测触摸移动圆圈

2 个答案: