title: Leaflet: How to handle touch events (e.g. on mobile devices)
body: <p>Please take a look at the code below. It's drawing a circle onto the map. If the user clicks with the <strong>mouse</strong> or taps with his <strong>finger</strong> (on a mobile device) into the circle and drags it, the circle should be moved across the map.</p>
  
  <p>This works for Desktop Firefox, Desktop Chrome, Mobile Firefox. But <strong>not</strong> with Mobile Chrome. I think that the code in Mobile Firefox maybe just works because the browser emulates touch-inputs to mouse-inputs which of course are working well in Leaflet.</p>
  
  <p>So I need help how to best implement <strong>touch events</strong> (parallel to mouse events) within Leaflet. Touch events are not mentioned in Leaflet's Doc. But i think the usual Javascript DOM-events should work too? (<em>touchstart, touchmove, touchend</em>). But not within Chrome mobile the way my code is written.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Eventtest&lt;/title&gt;
   &lt;meta charset="utf-8" /&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css"/&gt;
      &lt;script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mapid" style="width: 600px; height: 400px;"&gt;&lt;/div&gt;
  &lt;script&gt;
  var mymap = L.map('mapid').setView([51.505, -0.09], 13);
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
     '&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, ' +
     'Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
    id: 'mapbox.streets'
   }).addTo(mymap);
  
   circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
   }).addTo(mymap);
  
   circle.on('mousedown touchstart', onCircleDown);
   
   function onCircleDown (e1) {
    mymap.dragging.disable();
    var mouseStartingLat = e1.latlng.lat;
    var mouseStartingLng = e1.latlng.lng;
    var circleStartingLat = e1.target._latlng.lat;
    var circleStartingLng = e1.target._latlng.lng;
    circle.on('mousemove', function (e2) {
      var mouseNewLat = e2.latlng.lat;
                  var mouseNewLng = e2.latlng.lng;
                  var latDifference = mouseNewLat - mouseStartingLat;
                  var lngDifference = mouseNewLng - mouseStartingLng;
                  var currentCircleCoords = L.latLng (circleStartingLat + latDifference, circleStartingLng + lngDifference);
                  e1.target.setLatLng (currentCircleCoords);
    });
    circle.on ('mouseup', function () { 
                      circle.off('mousemove');
       mymap.dragging.enable();
                  });
   }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>