How Is Jquery Mobile Interfering With My Mouse/touch Listening On Svg Documents?

I have an app that uses my own approach to SVG buttons, which required some hackery to get to work but I've liked how it works. However when I add jQuery Mobile to the project, my

Solution 1:

I'm not sure what exactly in JQM is causing the problem described, but I was able to get my code to work with a little modification:

functionbuttonifySVG(id, clickHandler) {
    var obj = document.getElementById(id);
    functionaddClickHandler() {
        var svgDoc = obj.getSVGDocument();
        var rect = svgDoc.getElementsByTagName('rect')[0];
        rect.removeEventListener('touchstart', clickHandler);
        rect.removeEventListener('mousedown', clickHandler);
        rect.addEventListener('touchstart', clickHandler);
        rect.addEventListener('mousedown', clickHandler);
    }
    obj.addEventListener('load', addClickHandler, false);
}

This relies on the fact that I authored the SVG images myself to have a single rect element as the top-most object for simple mouse/touch events. Not sure if there is a more generic approach that would work, depends on how the SVG is made. Whatever JQM is doing seems to be blocking events where the target is the SVG document itself, but not blocking events within that document. I have noticed a new bug with my code on mobile devices where I'm getting 2 touch events for each button touch, which may or may not be due to the above code...