Hammer.js Testing

<!DOCTYPE html>
<html>

  <head>
    
    <script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3" src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h2>Instruction: </h2>
    <p>Pinch, Tap, DoubleTap, Drag, and Swipe the box.</p>
    <p>The event will be displayed in the box.  Also, the event & event.gesture SHOULD have their default behaviors prevented (but that might not always be the case depending on your device.)</p>
    <div id="my-div">
        <p id="debug-message">Hello</p>
    </div>
    
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

var element = document.getElementById('my-div');

var debugMessage = $('#debug-message');

Hammer(element).on("tap", function(event) {
    event.preventDefault();
    event.gesture.preventDefault();
    debugMessage.text("tap");
});

Hammer(element).on("swipe", function(event) {
    event.preventDefault();
    event.gesture.preventDefault();
    debugMessage.text("swipe");
});

Hammer(element).on("drag", function(event) {
    event.preventDefault();
    event.gesture.preventDefault();
    debugMessage.text("drag");
});

Hammer(element).on("pinch", function(event) {
    event.preventDefault();
    event.gesture.preventDefault();
    debugMessage.text("pinch");
});

Hammer(element).on("doubletap", function(event) {
    event.preventDefault();
    event.gesture.preventDefault();
    debugMessage.text("doubletap");
});

/* Styles go here */

#my-div {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    text-align: center;
}