title: Can *you* get SVG on mobile browser accept mouse/touch events? I can't
body: <p>I display an HTML, with an embedded SVG.  I want it to detect mouse events, but it isn't working on the mobile (Android Jellybean). It works fine for a desktop browser.</p>
  <p>Here is a demonstration page:   <a href="http://artsyenta.org/misc/ss/j.touchtry1.html" rel="nofollow noreferrer">http://artsyenta.org/misc/ss/j.touchtry1.html</a> .</p>
  <p>If you drag the mouse over the circles you see a log of mouse entries into the elements named &quot;j_xxx&quot;.  This works in Firefox and Chrome.</p>
  <p>Open your Android tablet (I've also tried this on somebody's iPhone, with the same results).  Drag your finger over the circles and you get a touchenter event only now and then.  Nothing else shows.</p>
  <p>You can see the whole page and code by viewing page source.  It isn't long, the longest part is the SVG definition.  The important parts are:</p>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
    makeSomethingHappen(&quot;hello&quot;);
  });
  function makeSomethingHappen(svg) {
    placeATop(true);
    $('[class^=j_]')
      .on(&quot;mouseover&quot;, function(event) { logAction(event, this); })
      .on(&quot;mouseout&quot;, function(event) { logAction(event, this); })
      .on(&quot;touchstart&quot;, function(event) { logAction(event, this); })
      .on(&quot;touchend&quot;, function(event) { logAction(event, this); })
      .on(&quot;touchenter&quot;, function(event) { logAction(event, this); })
      .on(&quot;touchleave&quot;, function(event) { logAction(event, this); })
      .on(&quot;touchEnter&quot;, function(event) { logAction(event, this); })
      .on(&quot;touchLeave&quot;, function(event) { logAction(event, this); });
  }
  
  var cntAct = 0;
  function logAction(ev, ele) {
    cntAct++;
    var logSpan = $('#logTrace');
    logSpan.html(&quot;&quot; + cntAct + &quot;: &quot; + ev.type + &quot; '&quot; + $(ele).attr(&quot;class&quot;) + &quot;'&lt;br/&gt;&quot; + logSpan.html());
  }
  </code></pre>
  <p>Here is part of the SVG:</p>
  <pre><code>&lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
       id=&quot;jsvg&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;376.247px&quot; height=&quot;364.318px&quot; viewBox=&quot;140 110 130 120&quot;
       enable-background=&quot;new 0 0 376.247 364.318&quot; xml:space=&quot;preserve&quot;&gt;
    &lt;g id=&quot;Layer_1&quot;&gt;
      &lt;path class=&quot;j_aa_&quot; opacity=&quot;0.75&quot; fill=&quot;#FFFFFF&quot; stroke=&quot;#0071BC&quot; stroke-width=&quot;0.9925&quot; enable-background=&quot;new    &quot; d=&quot;M224.739,6.55l-6.414,23.957c-10.377-2.785-21.304-2.785-31.671,0L180.232,6.55C194.813,2.63,210.155,2.63,224.739,6.55z&quot;/&gt; 
      [snip]
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>Again, I detect mouse events on a desktop browser but no touch or mouse events for a mobile browser.  Is there a missing technique, or there something missing with the mobiles?  It fails with the iPhone browser, Google Chrome on Jellybean and Firefox mobile.</p>
  <p>Thanks in advance,
  Jerome.</p>