javascript – 检测svg元素中的圆圈上的touchmove

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

通过监听mousedown和mouseover事件并将线元素添加到SVG,这在桌面上完美运行.

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

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

解决方法:

我建议使用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拼凑而成的演示

标签：javascript,svg,html,touchscreen
来源： https://codeday.me/bug/20190708/1403393.html