search

markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

'click' events treated as 'hover' on mobile device #434

Open kenirwin opened 6 years ago

kenirwin commented 6 years ago

I've working with Datamaps, and I just went to go test my code on an iPhone for the first time. I'm finding that clicking on a country on a mobile device is treated as a "hover" event -- highlighting the country but not triggering my on('click') jQuery events.

Example: http://www6.wittenberg.edu/lib/ken/datavis/datamaps/jquery.php

Clicking on a country in a desktop browser displays the country name in the "placeholder" div below the map. Doing so on my phone results only in highlighting the country and giving the mouseover text.

Is there some other event that has to be added to support mobile devices?

Thanks

ghost commented 6 years ago

I used the following that worked for me:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    deviceEventType = 'touchstart'
  } else {
  //If its not a mobile device use 'click'
    deviceEventType = 'click'
  }
eveahe commented 5 years ago

Thank you for this! Just solved the same problem for me.