nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Map click event not firing on android when using dojox.mobile.View

BillDaigle

I am trying to use the dojox.mobile framework to build a mobile friendly app. However, as soon as I add a require for "dojox/mobile/View", the map stops registering click events reliably on Android devices. It seems like it is an API issue, because if I roll back to API 3.10, it works fine.

Here is a jsFiddle that demonstrates the problem: http://jsfiddle.net/f1wt0yjq/

In order to see the problem on a desktop, you will need to view it in Android device using Chromes developer tools. When you click the map using an IOS device or windows, you get a "map clicked" in the console. The same is not when using an android device.

Find more posts tagged with

Accepted answers

BillDaigle

Alright. Finally got it working. The key is setting window.document.dojoClick to false.

Here is a jsfiddle that seems to work on all emulated devices.

http://jsfiddle.net/8m8y6gea/8/

All comments

BillDaigle

Alright. Finally got it working. The key is setting window.document.dojoClick to false.

Here is a jsfiddle that seems to work on all emulated devices.

http://jsfiddle.net/8m8y6gea/8/

BillDaigle

Ok, I think I tracked it down to the root of the problem. It appears to be caused by the following lines of code in "dojox/mobile/common", which is called by "dojox/mobile/View".

    // tell dojo/touch to generate synthetic clicks immediately
    // and regardless of preventDefault() calls on touch events
    win.doc.dojoClick = true;
    /// ... but let user disable this by removing dojoClick from the document
    if(has("touch")){
        // Do we need to send synthetic clicks when preventDefault() is called on touch events?
        // This is normally true on anything except Android 4.1+ and IE10+, but users reported
        // exceptions like Galaxy Note 2. So let's use a has("clicks-prevented") flag, and let
        // applications override it through data-dojo-config="has:{'clicks-prevented':true}" if needed.
        has.add("clicks-prevented", !(has("android") >= 4.1 || (has("ie") === 10) || (!has("ie") && has("trident") > 6)));
        if(has("clicks-prevented")){
            dm._sendClick = function(target, e){
                // dojo/touch will send a click if dojoClick is set, so don't do it again.
                for(var node = target; node; node = node.parentNode){
                    if(node.dojoClick){
                        return;
                    }
                }
                var ev = win.doc.createEvent("MouseEvents"); 
                ev.initMouseEvent("click", true, true, win.global, 1, e.screenX, e.screenY, e.clientX, e.clientY); 
                target.dispatchEvent(ev);
            };
        }
    }

Looks like I might be able to override it for the map or feature layer. Or maybe the whole page. Not sure.

BillDaigle

I like the concept, but it seems like a slippery slope when it comes to implementation. I need it to behave like a map or feature layer click event. I would need to fetch the underlying graphics and code for the difference between a short click, long click, pan, etc. Doable, but a potential maintenance nightmare. I'm curious why this stopped working at version 3.11. There was a move to Dojo 1.10 at this point. I doesn't look like there is any functional difference between the the 1.9 and 1.10 version of dojo.mobile.View, so I suspect the issue is in the Javascript API.

I guess I'm leaning towards rolling back to version JSAPI 3.10 or trying a different mobile framework.

ChrisSmith7

Bill,

I got it to work setting my own event:

Edit fiddle - JSFiddle

RickeyFight

Bill,

I have no device besides emulators to try your app at. My dept has only IOS devices, Sorry.

I did get it to work emulated on a desktop as Samsung Galaxy note II.

BillDaigle

I noticed the errors when emulating as well. I'm not too concerned about them since they are the same for both apple and android.

The problem is intermittent. Once in a while I can get a event to fire, but rarely. You can view the app I'm working on at this link: Sunrise/Sunset Times by Zone

It works fine on my desktop and on IOS devices, but not on Android.

ChrisSmith7

And those console errors just look related to jsfiddle... Actually, interesting comment in action.js:

// TODO: refactor
// TODO: This code is now legacy code, none of it will make its way into Beta

ChrisSmith7

I noticed there are some console errors only present when emulating:

Also, I was able to get 2 map clicks, randomly, but could not muster more.

RickeyFight

Ok, So when I refresh the page the only one that does not work is the Laptop with touch.

I get these errors

ChrisSmith7

UA spoofing issue on my end. Reloaded and it no longer works.

BillDaigle

Are you refreshing the browser when you switch devices? That is required on my end. If I do so, it works in the Apple devices, but not the Samsung or Google Nexus devices.

AvaFarouche_1-1748028271045.png

Subsurface Test.PNG

RickeyFight

Using Chrome developer tools I emulated every type of touch device and it does not work.

ChrisSmith7

Bill,

I tried this on my end and could see the clicks registered in console when targeting 3.14 and emulating a Samsung Galaxy S4.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.