使用JQuery移动触摸SVG事件

我在一个包含每个页面中的SVG的Web应用程序上工作，为了翻页，我必须使用滑动（左和右）。而对一个div或者IMG等任何问题检测刷卡事件，但它是不可能对包括SVG文件:(使用JQuery移动触摸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>

来源

2011-09-23 juju_b55

我刚刚发布了类似的问题http://stackoverflow.com/questions/22415992/how-is-jquery-mobile-interfering-with-my-mouse-touch-listening-on-svg-documents。在Chrome DevTools中查看jquery移动代码的Cursory显示了一些停止传播鼠标事件的地方，但我不确定SVG的具体情况，如果有的话。 –

试图让其中包含的点击动画SVG刷卡活动时，我有完全相同的问题，我发现T上的唯一途径o获取滑动事件是将覆盖svg的div与不透明度设置为0，然后我在SVG上丢失了单击事件。

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

来源

2011-10-05 16:31:22 user980779

使用JQuery移动触摸SVG事件

回答

相关问题