使用 JQuery mobile 在 SVG 上触摸事件答案

【问题标题】：Touch Events on SVG with JQuery mobile使用 JQuery mobile 在 SVG 上触摸事件
【发布时间】：2011-11-23 11:42:43
【问题描述】：

我在一个每个页面都包含 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>

【问题讨论】：

我刚刚发布了一个类似的问题stackoverflow.com/questions/22415992/…。粗略浏览 Chrome DevTools 中的 jquery 移动代码显示了它停止传播鼠标事件的一些地方，但我不确定 SVG 可能是什么特定的，如果有的话。

标签： jquery events svg jquery-mobile touch

【解决方案1】：

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

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

【讨论】：