Fast Click Errors Out map.click() Event

[roblav96]

By using:

FastClick.attach( document.body )

Any regular click to mapbox produces this error: Mapbox-GL-JS Version 13.1

[tmcw]

Is this in reference to the fastclick library at https://github.com/ftlabs/fastclick ?

[roblav96]

Yes it is.

[lucaswoj]

Unfortunately we do not have the resources to handle support requests in our issue tracker. Please open a question on StackOverflow if you're still looking for help.

[mikkelsjolin]

@roblav96 I'm having the same problem. Only, I'm just using Mapbox GL JS by it self and not calling FastClick.attach( document.body )

The error is only appearing when I run my app on my iOS device in a Web View using Cordova.

Did you come up with any kind og workaround?

[roblav96]

https://github.com/hammerjs/hammer-time = winning

[lucaswoj]

@bhousel: Does this look like a bug in our interaction handler? Perhaps the event object isn't formatted the way we expect.

[roblav96]

I'm not too sure, with hammertime and the latest mapbox it's working perfectly!

[bhousel]

Does this look like a bug in our interaction handler?

No idea... I've never heard of fastclick or hammertime before today.

[mikkelsjolin]

I gave hammer-time a go and got the same error:

[roblav96]

@mikkelsjolin strange, it works perfectly fine on my app

[mikkelsjolin]

@roblav96 Can I get you to check the versionnumbers for Mapbox GL JS and Hammer-time in our app? :)

[jvence]

Having the same problem. Basically, if you're using fastclick.js with mapbox GL, you will get an error when you click on the map. Removing fastclick.js, will solve the issue.

[tmcw]

Just tried our default debug map with FastClick 1.0.6 and didn't find any errors clicking on the map in Chrome, Safari, or Firefox. Here's an example in a jsfiddle: https://jsfiddle.net/g10s96ac/

Are there any other variables I'm missing here? Is everyone using up-to-date FastClick, a normal browser.. anything else?

[roblav96]

I'm using mapbox v0.14.3 and latest https://github.com/hammerjs/hammer-time with no problems in Cordova. Android crosswalk +18. iOS wk-webview

[jvence]

Error appears when trying to click anywhere on the map or markers. Have installed the latest version of fast click and mapbox gl js 0.20:

[Error] TypeError: null is not an object (evaluating 't.x')
    equals (mapbox-gl.js:347:662)
    s (mapbox-gl.js:148:1067)
    dispatchEvent
    sendClick (fastclick.js:308)
    onTouchEnd (fastclick.js:606)
    (anonymous function) (fastclick.js:111)

Removing fast click makes these errors go away

Basically E is null in the function below (in mapbox-gl.js): function s(e) { var t = DOM.mousePos(g, e); t.equals(E) && h("click", e) }

[toriphes]

A possible solution to this issue:

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {

        FastClick.prototype._needsClick = FastClick.prototype.needsClick;
        FastClick.prototype.needsClick = function(target) {
            var matchesSelector = HTMLElement.prototype.matchesSelector
                || HTMLElement.prototype.webkitMatchesSelector
                || HTMLElement.prototype.mozMatchesSelector
                || HTMLElement.prototype.msMatchesSelector;

            if (matchesSelector.call(target, '.mapboxgl-canvas')) {
                return true;
            }

            return FastClick.prototype._needsClick.call(this, target);
        };

        FastClick.attach(document.body);
    }, false);
}

[lucaswoj]

Glad you found a workaround @toriphes! Unfortunately we don't have the bandwidth to provide support for FastClick or Cordova right now. If this turns out to be a bug with GL JS core, we will be happy to fix the problem.

[pooooood]

you should addClass 'needsclick' to the mapboxgl canvans to ignore the map element. Sometimes, you need not use FastClick on certain elements, you can add style to easily realized needsclick.

[musicformellons]

After looking into this for a while I note a couple of things: 1) The "Uncaught TypeError: Cannot read property 'x' of null" is indeed the same issue. 2) Bypassing fastclick solves the click issues.

When using fastclick: 1) In mapbox-gl.js the line t.equals(L) && h("click", e) produces the error as L is defined in var g = e.getCanvasContainer(), p = null, E = !1, L = null, b = null; as null. When I change L into L = !1 the errors are gone, but click behavior on my mapbox canvas is not working properly. 2) Typical problematic click behavior: a) When normal clicking once the click does not work. b) Drag, Twofingerswipe, etc work normal. c) Testing e.g. on the compact attribution widget: It does not work when clicking once. It works when first clicking long, or first clicking right and then clicking once... 3) Typical behavior can be seen in this fiddle. DO NOTE the behavior only shows when truly in "touch mode", so after going into mobile mode (F12 in Chrome) and then refresh (F5); Then click on the attribution widget and it will not open. Also the error below will show in the browser console when clicking anywhere on the map:

index.js:28 Uncaught TypeError: Cannot read property 'x' of null
    at Point.equals (index.js:28)
    at HTMLDivElement.s (bind_handlers.js:113)
    at FastClick.sendClick (fastclick.js:308)
    at FastClick.onTouchEnd (fastclick.js:606)
    at HTMLBodyElement.<anonymous> (fastclick.js:111)
equals @ index.js:28
s @ bind_handlers.js:113
FastClick.sendClick @ fastclick.js:308
FastClick.onTouchEnd @ fastclick.js:606
(anonymous) @ fastclick.js:111

Note: when I uncommenting the initialisation lines for fastclick in the fiddle like in this one the behavior looks ok. However in my own setup that is not the case...

4) Click behavior on other non-map canvas elements in same screen does not give errors and behaves normal.

[jfirebaugh]

Fastclick synthesizes a click event but not the preceding mousedown event (or the subsequent mouseup event). This, in my opinion, is a bug in fastclick. There's a PR open for it: https://github.com/ftlabs/fastclick/pull/308

[musicformellons]

@jfirebaugh Thanks a lot! When using the FastClick PR you referred to I can now click the markers on my map and they work fine!

However the compact attribution widget still does not work properly (it only opens after a long click). Any idea?

EDIT: I added the navigation widget and the geolocation widget and these work fine! Could it be because these are html buttons whereas the attribution is not?

[musicformellons]

Adding 'needsclick' to the class of the compact attribution element helps in clicking it open, but closing still does not work properly (needs a long click outside the widget to close).

[alejandroiglesias]

I fixed it by calling $(map.getCanvas()).addClass('needsclick') on map load event handler.