jQuery mobile如何干扰我的鼠标/触摸在SVG文档上的收听? [英] How is jQuery mobile interfering with my mouse/touch listening on SVG documents?

问题描述

我有一个应用程序，该应用程序使用自己的SVG按钮方法，需要一些黑客才能上班，但我喜欢它的工作方式.但是，当我将jQuery Mobile添加到项目中时，我的按钮不再响应单击或触摸.

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.

我的按钮不是< button>元素，但< object>链接外部SVG文件的标签.我有如下代码将它们连接起来:

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

这是一个示例按钮":

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

并且要完全清楚:

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

我可以通过日志记录确认该代码仍在连接按钮，但是从不调用传入的clickHandler.除此之外，在jquery-mobile.js中四处浏览，似乎至少有一个地方拦截并停止了点击，但是我不知道何时，更重要的是，我宁愿不开始破解jquery代码使事情起作用.

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.

此外，jQuery Mobile是否对< object id ="myButton" type ="image/svg + xml" data ="foo.svg">做任何特殊的事情?元素?这种方法具有很多不错的功能，我真的很想让它与jQuery Mobile一起使用-我正在寻找的解决方案是不要用jQuery SVG图标按钮替换我的智能按钮(尽管我计划将这些按钮用于其他功能)用户界面的一部分).

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).

感谢您的帮助！

推荐答案

我不确定JQM中到底是什么引起了所描述的问题，但是我能够对我的代码进行一些修改:

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

这取决于我自己编写SVG图像的事实，即将单个 rect 元素作为简单鼠标/触摸事件的最顶层对象.不确定是否有更通用的方法可行，这取决于SVG的制作方式. JQM所做的任何事情似乎都将阻止目标为SVG文档本身的事件，而不是阻止该文档中的事件.我在移动设备上的代码中发现了一个新错误，该错误导致每次按钮触摸都发生2次触摸事件，这可能是由于上述代码引起的，也可能不是由于该代码引起的.

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...

这篇关于jQuery mobile如何干扰我的鼠标/触摸在SVG文档上的收听?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！