Leaflet: "Touch" Events do not fire correctly on mobile browsers

Created on 19 Jul 2017 · 10Comments · Source: Leaflet/Leaflet

Check the following testcase and try to trigger the events using the blue square: ~~https://playground-leaflet.rhcloud.com/rol/1/edit?html,output~~
https://pomf.pyonpyon.moe/jvlscs.html (identical content, new link)

Summary of the various browser:

| IE | FF (PC) | Chrome (PC) | FF (Android) | Chrome (Android) | Safari (iPad)
-- | -- | -- | -- | -- | -- | --
click | ✔ | ✔ | ✔ | ✔ | ✔ | ✔
dblclick | ✔ | ✔ | ✔ | ✔ | ❌ | ✔
mousedown | ✔ | ✔ | ✔ | ✔ | ❌ | ✔
mouseover | ✔ | ✔ | ✔ | ❌ | ✔ | ❌
mousemove | ✔ | ✔ | ✔ | ✔ | ❌ | ✔
mouseout | ✔ | ✔ | ✔ | ❌ | ✔ | ❌
contextmenu | ✔ | ✔ | ✔ | ✔ | ❌* | ✔

* Event can fire, if dragging is set to true

Version for each browser is the latest stable, non-beta, version. Running Windows 7, Android 7.1.2 and iOS 10.3.2. Leaflet 1.1.0 is being used.

P.S. I am currently trying to fix my leaflet implementation with workarounds, but the current chrome behavior broke me mentally :-/

needs investigation

Source

Ceremony64

👍7

Most helpful comment

Is still no solution to get 'touch' events works with leaflet?

AnTi3z on 13 Oct 2018

👍3

All 10 comments

I second this issue! Mouse events like "mousedown" or "mousemove" work perfect on Desktop browsers. But it's not possible to make them (or even the standard JS touch events like "touchstart" or "touchmove" reliable work on each Browser of mobile devices.
I think this is a big showstopper for Leaflet. Leaflet itself should provide methods to make scripts and plugins relying on these kind of usual Mouse+Click events work on Desktop browsers and Mobile Browsers as well. Without the use of external code or days of recherche to code some individual workarounds.

Ideal would be the us of just one eventname (e.b. "pointermove") which is handled on both types: on Desktop's Browsers using mouse-input as well as Mobile Browser's Touchinputs.

See also the questions here:
Question 1
Question 2

ppete2 on 28 Jul 2017

@Ceremony64 hm, odd. I do see mousedown and mousemove on Android 7.1.2/Chrome 59, but no dblclick.

I would think this is related to #5180 and Chrome's pointerevents, but not sure exactly how.

@ppete2 that _is_ more or less exactly how Leaflet is intended to work, and has worked for a very long time, although something is apparently broken right now.

perliedman on 29 Jul 2017

@perliedman wow... that is weird. Back when I tested it to compile the table, I only used the rendered "output" view of it, which now isn't available anymore (freemium registration required bs). Who knew more events fire if its running in an iframe? Unfortunately, all other jsbin alternatives i tested do not offer an exclusive live view link, so i used a pomf hoster:
Direct: https://pomf.pyonpyon.moe/jvlscs.html
Within iframe: https://pomf.pyonpyon.moe/veoqth.html

Ceremony64 on 31 Jul 2017

Looks like touch events aren't fired in any browser.
But in Safari and FF it is possible to listen for mouse events, since those browsers fire mouse events instead.
In Chrome, for now there is no way to handle touch events.
I'll dig into this later.

cherniavskii on 3 Oct 2017

This is something I just realized. I updated my library to work with the latest leaflet and noticed that when using the device mode on chrome the double click event stops working and thus we cannot zoom in by double clicking. This is something that used to work since I can repeat the same experiment on my app in both desktop and device and the zoom by double clicking works when using leaflet 1.0.2. You can see that this is broken in the main leaflet site:

gif

In the view I realize that it may look as if we reached the max zoom but I tried again this time starting with the minimum zoom and I get the same result.