jquery - 使用 JQuery mobile 在 SVG 上触摸事件

Question

我正在开发一个每个页面都包含 SVG 的网络应用程序，为了翻页，我必须使用滑动(向左和向右)。在 div 或 img 等上检测到滑动事件没有任何问题。但在包含的 SVG 文件上检测到触摸事件是不可能的:(

我使用的是 JQuery 1.6.4 和 JQuery mobile 1.0b3。

JS:

$('.touchPad object').live('swipeleft swiperight',function(event){
    var currentPage = getVar("page");
    if(currentPage == "0")
    {
        currentPage = 1;
    }

    if (event.type == "swiperight") {
        currentPage ++;
        var page = "page="+currentPage;

        $.mobile.changePage({
        url: "http://asample.com/JQueryMobileTests/index.php",
        type: "get",
        data: page},
        "slide",
        true
        );
    }
    if (event.type == "swipeleft") {
        currentPage --;
        var page = "page="+currentPage;

        $.mobile.changePage({
            url: "http://asample.com/JQueryMobileTests/index.php",
            type: "get", 
            data: page
        });
    }
    event.preventDefault();
});

HTML:

<div role-data="page" class="touchPad">
    <div role-data="header"></div>
    <div role-data="content">
        <div>
            <h1>Page : </h1>
            <object type="image/svg+xml" data="pict.SVG" width="800" height="800"></object>
        </div>
    </div>
</div>

Answer 1

当我尝试在包含单击动画的 svg 上获取滑动事件时，我遇到了完全相同的问题。我发现获得滑动事件的唯一方法是放置一个 div 覆盖 svg，不透明度为 0，但我会丢失 SVG 上的点击事件。

<svg style="width:100px; height:100px" /><div style="position:absolute; width:100px; height:100px; opacity:0">&nbsp;</div>