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 buttons are no longer responding to clicks or touch.

My buttons are not <button> elements, but <object> tags that link an external SVG file. I have code to hook these up like so:

function buttonifySVG(id, clickHandler) {
    var obj = document.getElementById(id);
    var svgDoc = obj.getSVGDocument();
    function addClickHandler() {
        svgDoc.removeEventListener('touchstart', clickHandler);
        svgDoc.removeEventListener('mousedown', clickHandler);
        svgDoc.addEventListener('touchstart', clickHandler);
        svgDoc.addEventListener('mousedown', clickHandler);
    }
    addClickHandler();
    obj.addEventListener('load', addClickHandler, false);
}

Here's a sample "button":

<object id="stepForward"type="image/svg+xml" data="stepForward.svg"></object>

And just to be completely clear:

...
buttonifySVG('stepForward', function() { doTheThing(); })

I can confirm with logging that the buttons are still being hooked up by this code but that the passed in clickHandler is never called. Beyond that, poking around in jquery-mobile.js, looks like there's at least one place where clicks are being intercepted and stopped, but I can't tell when, and more to the point, I'd rather not start hacking jquery code to get things to work.

Can anyone tell me what's likely the problem? I may be able to hack around it if I know what's going on here.

Also, does jQuery Mobile do anything special with <object id="myButton" type="image/svg+xml" data="foo.svg"> elements? This approach has so many nice features I'd really like to get it to play well with jQuery Mobile -- the solution I'm seeking is not to replace my smart buttons with jQuery SVG icon buttons (though I plan to use those for other parts of the UI).

Thanks for any help!

回答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:

function buttonifySVG(id, clickHandler) {
    var obj = document.getElementById(id);
    function addClickHandler() {
        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...

来源：https://stackoverflow.com/questions/22415992/how-is-jquery-mobile-interfering-with-my-mouse-touch-listening-on-svg-documents