How can I trigger a FeatureLayer click event on mobile devices?

3819
5
04-07-2016 06:29 AM
DavidMeza
New Contributor II

I'm having an issue where click events don't fire as touch/tap events on mobile and would like to know what is the proper way to do this. Currently, my code looks like this:

  var myLayer = new FeatureLayer(...); 
  myLayer.on('click', function (evt) { 
    // do something   
  });   

Also worth noting, I've tried requiring this module

'dojox/mobile/View'

and setting this variable

document.dojoClick = false;

Any help would be appreciated. Thank you!

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus

David,

  Try:

myLayer.on("touchend, click", function(evt) {
  //do something
}
0 Kudos
DavidMeza
New Contributor II

Robert,

Thank you for your suggestion and prompt response. Unfortunately, this did not work.

I also have a mouse-over event going on that triggers a tooltip, and this seems to work just fine on mobile devices. I don't think this other event is conflicting with the mouse click / touchend event since I've tried to turn the mouse-over event off and still ran into the same issue.

I've also noticed that it IS possible to trigger the click event. You just have to be extremely precise on where you tap and it can take 50+ attempts to get it to work.

Any other ideas?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

David,

  I have seen instances where you have to use:

myLayer.on("touchend, click", function(evt) {
  // Add a delay to compensate for Dojo's touch event handling 
  setTimeout(function() {
      //do something 
  }, 250);
}

But it sounds like you may be trying to click a point feature and this has always seemed to be an issue in the JS API.

0 Kudos
DavidMeza
New Contributor II

Thank you again. Unfortunately, this solution did not make a difference in my application.

I agree with you. I have noticed that this has been an issue from as early as 2012. Is there any way we can get in touch with the developers and point this out? This is very much a crucial feature of the Javascript API and the application I'm working on. I'm a bit surprised it doesn't work so well on mobile devices (it is not just this single issue, but there are other modules such as the LocateButton, other events handling, etc that don't work well).

0 Kudos
DavidMeza
New Contributor II

I've fixed this issue. I discovered it may have been caused by the method Angular Material uses to handle gestures and touch events. I didn't dig into their code too much, so I'm not sure what the optimal solution for this kind of problem would be. However, my workaround was to add a mousedown event to the feature layer

myLayer.on("touchend, click, mouse-down", function(evt) {   

  //do something 

}