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.
Here is a demonstration page: http://artsyenta.org/misc/ss/j.touchtry1.html .
If you drag the mouse over the circles you see a log of mouse entries into the elements named "j_xxx". This works in Firefox and Chrome.
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.
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:
$(document).ready(function() {
makeSomethingHappen("hello");
});
function makeSomethingHappen(svg) {
placeATop(true);
$('[class^=j_]')
.on("mouseover", function(event) { logAction(event, this); })
.on("mouseout", function(event) { logAction(event, this); })
.on("touchstart", function(event) { logAction(event, this); })
.on("touchend", function(event) { logAction(event, this); })
.on("touchenter", function(event) { logAction(event, this); })
.on("touchleave", function(event) { logAction(event, this); })
.on("touchEnter", function(event) { logAction(event, this); })
.on("touchLeave", function(event) { logAction(event, this); });
}
var cntAct = 0;
function logAction(ev, ele) {
cntAct++;
var logSpan = $('#logTrace');
logSpan.html("" + cntAct + ": " + ev.type + " '" + $(ele).attr("class") + "'<br/>" + logSpan.html());
}
Here is part of the SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
id="jsvg" x="0px" y="0px" width="376.247px" height="364.318px" viewBox="140 110 130 120"
enable-background="new 0 0 376.247 364.318" xml:space="preserve">
<g id="Layer_1">
<path class="j_aa_" opacity="0.75" fill="#FFFFFF" stroke="#0071BC" stroke-width="0.9925" enable-background="new " d="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"/>
[snip]
</g>
</svg>
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.
Thanks in advance, Jerome.