Hover/mouseOver not working on Chrome

[arminus]

For some reason, in my implementation, the mouseOver/Hover function doesn't work on Chrome but it works ok on Firefox. Since there is no such issue on http://mrmufflon.github.io/Leaflet.Elevation/example/example_gpx.html I assume it's some side-effect in my code. Any idea what could be causing this?

See https://www.xctrails.org/map/map.html?trail=1479625&type=xc as an example.

[Jerome03]

You use Leaflet 1.02, I had the same problem as you. My solution was to replace L.Browser.touch by L.Browser.mobile in leaflet.elevation-0.0.4.min.js.

[arminus]

Very well, works for me too, @Jerome03 - thanks!

[nrenner]

Here is a demo of the issue:

http://playground-leaflet.rhcloud.com/vok/edit?html,output

The reason for this is that Leaflet.Elevation is registering either touch or mouse events based on L.Browser.touch. The meaning of this flag has changed from Leaflet v0.7 to v1.0 (see also issue Leaflet/Leaflet#3944):

• "true for all browsers on touch devices." - 0.7.x
• "true for all browsers supporting touch events. This does not necessarily mean that the browser is running in a computer with a touchscreen, it only means that the browser is capable of understanding touch events." - 1.0.3

Technically, maxTouchPoints was removed (in Leaflet/Leaflet#3839) from the L.Browser.pointer test, which is part of the touch test. A "truthy" maxTouchPoints (> 0) was supposed to actually detect a touchscreen (see spec note). Now without it, the pointer and touch tests are true in all desktop browsers supporting Pointer Events, currently Chrome, IE, Edge and Opera.

The way forward would probably be to support all available events, see e.g.:

• Touch And Mouse - MDN

  Many developers have built sites that statically detect whether an environment supports touch events, and then make the assumption that they only need to support touch (and not mouse) events. This is now a faulty assumption - instead, just because touch events are present does not mean the user is primarily using that touch input device. Devices such as the Chromebook Pixel and some Windows 8 laptops now support BOTH Mouse and Touch input methods, and more will in the near future.

• Detecting touch: it's the 'why', not the 'how' - Mozilla Hacks

  Specifically, instead of making the decision about whether to react to click or touchend/touchstart mutually exclusive, these should all be taken into consideration as complementary.

  blah.addEventListener('touchend', function(e) {
    /* prevent delay and simulated mouse events */
    e.preventDefault();
    someFunction()
  });
  blah.addEventListener('click', someFunction);
  

Based on the demo above, I had a try at additionally listening to mouse events when L.Browser.touch is true:

http://playground-leaflet.rhcloud.com/tudo/edit?html,output

But I'm seeing some issues, mostly because of unhandled simulated/compatibility mouse events:

• duplicate pointerup > mouseup events immediately trigger _resetDrag after zoom
  -> "fixed" by only listening to mouseup when not L.Browser.pointer
• "Error: no data in parameters" error because of duplicate touchend > mouseup in Firefox touch simulator - maybe only a simulator issue (not handling preventDefault)?
• sometimes track not visible immediately after zoom reset on Android, not investigated further

I would suppose that compatibility mouse events are handled by d3 and Leaflet, but in our case there is a mixed use of d3 and Leaflet events that might cause some of these issues. E.g. Leaflet automatically adds pointer listeners for registered touch events, but d3 doesn't seem to handle pointer events yet.

As I don't know right now why there is a mixed use of d3 and Leaflet events, and as I don't have enough devices to test, I currently don't feel like making a PR.

Any takers? Any hints?

[carlos-mg89]

Use this fork https://github.com/Raruto/leaflet-elevation

It's up to date and works like a charm.