Detect touchmove on circle in svg element

Question

I made a website that displays an SVG element (embedded in the HTML) and want to allow users to connect dots (<circle> elements) in it by dragging with their mouse or finger over them.

By listening to the mousedown and mouseover events and adding line elements to the SVG this works perfectly on the desktop.

I added listeners to touchstart, touchmove, touchend and touchcancel but I ran into issues. It seems like touchmove is never triggered on Google Chrome on my Android phone and on Google Chrome on my Android tablet it is only triggered when I remove my finger.

Edit: Here's my code in a fiddle: http://jsfiddle.net/s5vcfzbq/ You can drag with your mouse from circle to circle to connect them, but it doesn't work on touch screens.

Probably best if you can have a runnable demo running here. – Lee Taylor Sep 29 '14 at 21:31 — Lee Taylor, Sep 29 '14 at 21:31

score 2 · Accepted Answer · answered Aug 08 '16 at 08:56

I recommend InteractJS to handle touch events. It doesn't have any dependencies and handles dragging, rotation and multitouch etc.

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

Here is a demo I cobbled together on Codepen using SVGs

score 0 · Answer 2 · answered Jan 19 '21 at 13:59

You can try this simple workaround (from this answer):

Add a 'touchstart' eventListener to the container <svg> element with a noop handler:

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

Now your <circle> elements should trigger touch events reliably.

Detect touchmove on circle in svg element

2 Answers2