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

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

我的按钮不是元素，而是链接外部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); } 

这是一个示例“按钮”：

而且要完全清楚：

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

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

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

另外，jQuery Mobile是否对元素做了什么特别的事情？ 这种方法有很多很好的function，我真的很想让它与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个触摸事件，这可能是因为上面的代码也可能不是…