如何让hammer.js在不使用jquery的情况下与svg文件一起工作

How to get hammer.js to work with svg files without using jquery?

本文关键字：情况下 svg 文件 工作 一起 jquery hammer js      更新时间：2023-09-26

我试图实现锤子.js与svg文件，而不使用任何jquery。我试图使用样例代码从锤.js网站{https://github.com/EightMedia/hammer.js/wiki/Getting-Started}。我有外部的javascript调用像这样。

<script src="javascript/hammer.js" type="text/javascript"></script>

我的javascript代码如下:

<script type="text/javascript">
  //<![CDATA[       
    var element = document.getElementById("testsvg");
    var hammertime = Hammer(element).on('doubletap', function(event){
                                 alert("doubletap!");
                                 return false;
                               }
                       );
  //]]>
  </script>

我的svg如下所示:

<svg version="1.1" id="testsvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="585px" height="230" viewBox="0 0 585 230" enable-background="new 0 0 585 230" xml:space="preserve">
    <rect x="10" y="10" height="210" width="565" style="stroke:#006600; fill: #00cc00"/>
</svg>

一开始，我只是想让任何检测工作。我双击时没有任何提示。我还试图在我的桌面上使用hammer.fakemultitouch.js插件来实现这一点。桌面环境和触摸环境都做不到任何事情。有人知道我做错了什么吗?

谢谢,——克里斯多夫

首先确保hammer.js正确加载。如果是，那么很可能是在加载DOM之前执行javascript。最简单的方法来解决这个问题是把你的<script>前关闭</body>标签(接近你的html文件的底部)。您还可以将代码包装在加载事件函数中，例如…

window.onload = function(){
    var element = document.getElementById("testsvg");
    var hammertime = Hammer(element).on('doubletap', function(event){
        alert("doubletap!");
        return false;
    });
}
相关文章：