检测svg元素中圆圈上的touchmove答案

【问题标题】：Detect touchmove on circle in svg element检测svg元素中圆圈上的touchmove
【发布时间】：2014-09-29 20:51:07
【问题描述】：

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

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

我向touchstart、touchmove、touchend 和touchcancel 添加了听众，但我遇到了问题。似乎touchmove 从未在我的 Android 手机上的 Google Chrome 和我的 Android 平板电脑上的 Google Chrome 上触发，只有在我移开手指时才会触发。

编辑：这是我的代码：http://jsfiddle.net/s5vcfzbq/ 你可以用鼠标从一个圆圈拖到另一个圆圈来连接它们，但它在触摸屏上不起作用。

【问题讨论】：

如果你可以在这里运行一个可运行的演示，那可能是最好的。

标签： javascript html svg touchscreen

【解决方案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
});

这是我在Codepen 上使用 SVG 拼凑的一个演示

【讨论】：

【解决方案2】：

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

使用 noop 处理程序将 'touchstart' eventListener 添加到容器 <svg> 元素：

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

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

【讨论】：