jQuery mobile 如何干扰我在 SVG 文档上的鼠标/触摸监听？答案

【问题标题】：How is jQuery mobile interfering with my mouse/touch listening on SVG documents?jQuery mobile 如何干扰我在 SVG 文档上的鼠标/触摸监听？
【发布时间】：2014-03-14 21:23:37
【问题描述】：

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

我的按钮不是

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 对

感谢您的帮助！

【问题讨论】：

您使用的是哪个 JQM 版本？请添加 html 标记示例。
使用 jqm 1.4.2。编辑帖子以澄清。

标签： javascript jquery jquery-mobile svg

【解决方案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 个触摸事件，这可能是由于上述代码，也可能不是...

【讨论】：