Question

我有一个应用程序，它使用我自己的SVG按钮方法，这需要一些hackery上班，但我喜欢它的工作原理。但是，当我将jQuery Mobile添加到项目中时，我的按钮不再响应点击或触摸。

我的按钮不是＆lt; button＆gt;元素，但＆lt; object＆gt;链接外部SVG文件的标记。我有代码来解决这些问题：

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);
}

这是一个示例“按钮”：

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

而且要完全清楚：

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

我可以通过日志记录确认按钮仍然被此代码连接，但传入的clickHandler永远不会被调用。除此之外，在jquery-mobile.js中浏览，看起来至少有一个地方点击被拦截和停止，但我不知道什么时候，更重要的是，我宁愿不开始破解jquery代码让事情发挥作用。

谁能告诉我这可能是什么问题？如果我知道这里发生了什么，我可能会破解它。

此外，jQuery Mobile是否对＆lt; object id =“myButton”type =“image / svg + xml”data =“foo.svg”＆gt;执行任何特殊操作。元素？这种方法有很多很好的功能，我真的很想让它与jQuery Mobile一起发挥 - 我正在寻求的解决方案是不要用jQuery SVG图标按钮替换我的智能按钮（尽管我计划将其用于其他UI的一部分。）

感谢您的帮助！

Answer 1

我不确定JQM究竟是什么导致了所描述的问题，但是我能够通过一些修改来使我的代码工作：

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);
}

这取决于我自己创作SVG图像的事实，只有一个 rect 元素作为简单鼠标/触摸事件的最顶层对象。不确定是否有更通用的方法可行，取决于SVG的制作方式。无论JQM做什么，似乎都是阻止目标是SVG文档本身的事件，而不是阻止该文档中的事件。我注意到移动设备上的代码出现了一个新的错误，我在每次按键触摸时都会收到2个触摸事件，这可能是也可能不是由于上面的代码...

jQuery mobile如何干扰我的鼠标/触摸SVG文档？

1 个答案: