title: How to prevent event bubbling on child of React-Leaflet Map
body: <p>I have a <a href="https://react-leaflet.js.org/" rel="noreferrer">React-Leaflet</a> map which I am rendering a <code>div</code> inside.</p>
  
  <p>For some reason, interacting with the contents of the div causes the map beneath to respond (eg: double-clicking will zoom the map, dragging will pan the map) - even when I'm calling <code>e.stopPropagation()</code> in handlers attached to the div.</p>
  
  <p>As I understand it, calling <code>stopPropagation()</code> should prevent the DOM events from ever reaching the map itself.</p>
  
  <p>Why does it appear that <code>stopPropagation()</code> is being ignored?</p>
  
  <p>How can I render a div <em>inside the map</em> without it's events bubbling to the map itself?</p>
  
  <p><a href="https://codepen.io/anon/pen/jjJdvw?editors=0110" rel="noreferrer">Here is an example codepen</a> showing the problem.</p>
  
  <pre><code>import { Map, TileLayer } from 'react-leaflet';
  
  const MyMap = props =&gt; (
    &lt;Map zoom={13} center={[51.505, -0.09]}&gt;
      &lt;TileLayer url={"http://{s}.tile.osm.org/{z}/{x}/{y}.png"} /&gt;
  
      {/* 
            HOW do I get this div to NOT pass it's events down to the map?!?! 
            Why does e.stopPropagation() appear to not work?
      */}
      &lt;div 
        id="zone"
        onClick={e =&gt; e.stopPropagation()}
        onMouseDown={e =&gt; e.stopPropagation()}
        onMouseUp={e =&gt; e.stopPropagation()}
      &gt;
        &lt;p&gt;Double-click or click and drag inside this square&lt;/p&gt;
        &lt;p&gt;Why does the map zoom/pan?&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/Map&gt;
  );
  
  ReactDOM.render(&lt;MyMap /&gt;, document.getElementById('root'));
  </code></pre>