Skip to content

Instantly share code, notes, and snippets.

@donovan-graham

donovan-graham/Hammer-JS-event-order.markdown

Last active August 29, 2015 14:13
Show Gist options
  • Save donovan-graham/49c2039a8c421661dcf5 to your computer and use it in GitHub Desktop.
Save donovan-graham/49c2039a8c421661dcf5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. donovan-graham revised this gist Jan 19, 2015. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions Hammer-JS-event-order.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Hammer JS event order
    ---------------------
    A single panLeft/panRight event is being fired before panStart. This seems like buggy behaviour

    A [Pen](http://codepen.io/donovan-graham/pen/XJRmLX) by [Donovan Graham](http://codepen.io/donovan-graham) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/donovan-graham/pen/XJRmLX/license).
  2. donovan-graham created this gist Jan 19, 2015.
    9 changes: 9 additions & 0 deletions XJRmLX.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    XJRmLX
    ------


    Forked from [Captain Anonymous](http://codepen.io/anon/)'s Pen [ByRoeq](http://codepen.io/anon/pen/ByRoeq/).

    A [Pen](http://codepen.io/donovan-graham/pen/XJRmLX) by [Donovan Graham](http://codepen.io/donovan-graham) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/donovan-graham/pen/XJRmLX/license).
    12 changes: 12 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@


    <div id="myElement">
    Pan me
    </div>

    <div id="myLog">
    </div>

    <div>
    <button onClick="clearLog(); return false;">Clear Log</button>
    </div>
    28 changes: 28 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@

    var myElement = $('#myElement');
    var myLog = $('#myLog');

    var mc = new Hammer(myElement[0]);

    mc.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });


    mc.on("panstart", function(ev) {
    myLog.append("<div>panstart</div>" );
    });

    mc.on("panleft", function(ev) {
    myLog.append("<div>panleft:" + ev.deltaX + "</div>");
    });

    mc.on("panright", function(ev) {
    myLog.append("<div>panright:" + ev.deltaX + "</div>");
    });

    mc.on("panend", function(ev) {
    myLog.append("<div>panend <br><br></div>");
    });

    function clearLog() {
    myLog.empty();
    }
    28 changes: 28 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    #myElement {
    width:300px;
    height: 300px;
    display: block;
    background-color: red;
    float: left;
    margin: 10px;
    text-align: center;
    vertical-align: middle;
    }

    #myLog {
    width: 280px;
    height: 280px;
    display: block;
    border: 1px solid #ccc;
    float: left;
    margin: 10px;
    padding: 5px;
    color: #333;
    overflow: scroll;
    }

    button {
    width: 80px;
    height: 40px;
    }