DEV Community

Cover image for Distance Between Two Points (SVG)
Zevan Rosser
Zevan Rosser

Posted on

Distance Between Two Points (SVG)

check out the console...

See more stuff like this over @ Snippet Zone

Discussion (11)

Collapse
dannyengelman profile image
Danny Engelman

Would be great if it also worked with a mouse pointer

Collapse
zevanrosser profile image
Zevan Rosser Author

@dannyengelman do you mean with pointer events? Not sure what you mean but would happily create a new snippet :D I have a few more distance related ones in the pipeline.

Collapse
dannyengelman profile image
Danny Engelman

It now only works on touch screens

Thread Thread
zevanrosser profile image
Zevan Rosser Author

thats interesting @dannyengelman - works on osx chrome for me... what browser are you on? Thanks :D

Thread Thread
dannyengelman profile image
Danny Engelman

hasTouch returns true on Chromium and FireFox Desktop browsers; and then the "touchmove" doesn't capture mouse movements.

Thread Thread
zevanrosser profile image
Zevan Rosser Author

thats weird - what operating system and device are you on?

Usually I use a library to detect true mobile... for the snippet I figured touch points was good enough - would be cool to know why it fails.

Thread Thread
zevanrosser profile image
Zevan Rosser Author

what do you get for navigator.maxTouchPoints in the console?

Thanks for your input on this @dannyengelman - I'm curious to know whats going on :D

Thread Thread
dannyengelman profile image
Danny Engelman

I have a Acer Spin laptop (with touchscreen!) running W10
maxTouchpoints returns 10 in Chromium (Chrome/Edge) and 10 in Firefox
So when you check for a > 0 value, it disables the use of the mouse
You need to always attach mousemove, and touchmove when the device has a maxTouchpoints value.
Or just bluntly always attach a touchmove handler; it will be ignored on non capable devices?

Thread Thread
zevanrosser profile image
Zevan Rosser Author

oh that explains it... I wonder why the Acer Spin doesn't register the touchmove? Sounds like pointer events is the better way to go. I feel like I've seen one of these kind of touch sniffing scripts that specifically does something with an ms prefix. Will dig a bit deeper and probably write a little thing up about it :D

Having normally used a "mobile/non-mobile" sniffing script, never really ran into this before. I do seem to remember some QA people I work with talking about something similar with the surface pro.

Thanks again for your help :D

Thread Thread
dannyengelman profile image
Danny Engelman • Edited on

It does do the touchmove. Your code needs to (always) attach a mousemove Event.

Thread Thread
zevanrosser profile image
Zevan Rosser Author

oh i see what you mean :D