如何在不使用 jquery 的情况下让hammer.js 处理 svg 文件？

Question

我正在尝试使用 svg 文件而不使用任何 jquery 来实现hammer.js。我正在尝试使用来自hammer.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 插件来实现这一点。桌面或触摸环境都不做任何事情。 有人知道我可能做错了什么吗？

谢谢， --克里斯托弗

Answer 1

首先确保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;
    });
}