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

Question

I am trying to implement the hammer.js with svg files and without using any jquery. I'm trying to use the sample code from the hammer.js site {https://github.com/EightMedia/hammer.js/wiki/Getting-Started}. I have the external javascripts called like this.

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

My javascript is as follows:

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

My svg looks like the following.

<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>

Starting out, I'm just trying to get any detection to work. I do not get any alert when I double tap. I have also tried to implement this with the hammer.fakemultitouch.js plugin on my desktop. Neither the desktop or touch environment do anything. Anyone have any idea what I might be doing wrongly?

Thanks, --christopher

Answer 1

First make sure hammer.js is loading correctly. If it is, then you are most likely executing the javascript before the DOM is loaded. The easiest way to fix this is to place your <script> right before the closing </body> tag (near the bottom of your html file). You can also wrap your code in a load event function such as...

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