Skip to content

Instantly share code, notes, and snippets.

@desandro

desandro/README.markdown

Created February 24, 2012 15:17
Download ZIP

Revisions

  1. desandro revised this gist Feb 24, 2012. No changes.
  2. desandro renamed this gist Feb 24, 2012. 1 changed file with 0 additions and 0 deletions.
    0 README.mdown → README.markdown
    View file
    File renamed without changes.
  3. desandro revised this gist Feb 24, 2012. No changes.
  4. desandro revised this gist Feb 24, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion addtap.js
    View file
    Original file line number Diff line number Diff line change
    @@ -159,4 +159,3 @@ addTap.Handler.prototype = {
    window.addTap = addTap;

    })( window );

  5. desandro revised this gist Feb 24, 2012. No changes.
  6. desandro revised this gist Feb 24, 2012. 2 changed files with 26 additions and 0 deletions.
    25 changes: 25 additions & 0 deletions README.mdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    # addTap

    **helper function for adding click-ish events for touch devices**

    ## Usage

    addTap( elem, onTap, options );

    // for example
    var box = document.getElementById('box');

    function onTap( event, cursor ) {
    // event is the event objects
    // cursor is the event or touch object, containing pageX and pageY
    console.log( event.type + ' just happened. At ' +
    cursor.pageX + ' ' cursor.pageY )
    }

    addTap( box, onTap, {
    moveableBuffer: 10
    });

    ## Options

    + `moveableBuffer`: how far in both directions of X and Y can the cursor move around, and still trigger a tap event
    1 change: 1 addition & 0 deletions addtap.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    /*!
    * addTap v1.0.00 - helper function for adding click-ish events for touch devices
    * by David DeSandro
    * https://gist.github.com/1901569
    */

    /*jshint undef: true, forin: false, browser: true */
  7. desandro created this gist Feb 24, 2012.
    161 changes: 161 additions & 0 deletions addtap.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,161 @@
    /*!
    * addTap v1.0.00 - helper function for adding click-ish events for touch devices
    * by David DeSandro
    */

    /*jshint undef: true, forin: false, browser: true */

    (function( window, undefined ){

    var isTouch = 'ontouchstart' in window;
    var cursorStartEvent = isTouch ? 'touchstart' : 'mousedown';
    var cursorMoveEvent = isTouch ? 'touchmove' : 'mousemove';
    var cursorEndEvent = isTouch ? 'touchend' : 'mouseup';

    // -------------------------- addTap -------------------------- //

    function addTap( elem, onTap, options ) {

    var handler = new addTap.Handler( onTap, options );

    elem.addEventListener( cursorStartEvent, handler, false );

    }

    // -------------------------- TapHandler -------------------------- //

    addTap.Handler = function( onTap, options ) {
    // bail out if onTap callback is not set
    if ( !onTap ) {
    return;
    }

    // set onTap callback
    this.onTap = onTap;

    // set options
    this.options = {};
    // set defaults
    for ( var prop in addTap.Handler.defaults ) {
    this.options[ prop ] = addTap.Handler.defaults[ prop ];
    }
    // overwrite with passed-in options
    for ( prop in options ) {
    this.options[ prop ] = options[ prop ];
    }

    };

    addTap.Handler.defaults = {
    moveableBuffer: 3
    };

    addTap.Handler.prototype = {

    handleEvent: function( event ) {
    if ( this[ event.type ] ) {
    this[ event.type ]( event );
    }
    },

    // ----- start ----- //

    mousedown: function( event ) {
    this.cursorStart( event );
    },

    touchstart: function( event ) {
    // bail out if we already have a touch
    if ( this.touch ) {
    return;
    }
    // get first changedTouch
    this.touch = event.changedTouches[0];
    this.cursorStart( this.touch );
    },

    cursorStart: function( cursor ) {
    // set start point
    this.startPoint = {
    x: cursor.pageX,
    y: cursor.pageY
    };

    // listen for move and end events
    window.addEventListener( cursorMoveEvent, this, false );
    window.addEventListener( cursorEndEvent, this, false );
    },

    // ----- move ----- //

    mousemove: function( event ) {
    this.cursorMove( event );
    },

    touchmove: function( event ) {
    var matchedTouch = this.getMatchedTouch( event );
    if ( matchedTouch ) {
    this.cursorMove( matchedTouch );
    }
    },

    getMatchedTouch: function( event ) {
    var touch, matchedTouch;
    // iterate through touches
    for ( var i=0, len = event.changedTouches.length; i < len; i++ ) {
    touch = event.changedTouches[i];
    // get matched touch
    if ( touch.identifier === this.touch.identifier ) {
    matchedTouch = touch;
    break;
    }
    }
    return matchedTouch;
    },

    cursorMove: function( cursor ) {
    var moveX = cursor.pageX - this.startPoint.x;
    var moveY = cursor.pageY - this.startPoint.y;

    // check if touch has moved outside buffer zone
    if ( Math.abs( moveX ) > this.options.moveableBuffer ||
    Math.abs( moveY ) > this.options.moveableBuffer
    ) {
    // if outside, then remove listeners, so onTap won't be triggered
    this.reset();
    }

    },

    // ----- end ----- //

    mouseup: function( event ) {
    this.cursorEnd( event, event );
    },

    touchend: function( event ) {
    var matchedTouch = this.getMatchedTouch( event );
    if ( matchedTouch ) {
    this.cursorEnd( event, matchedTouch );
    }
    },

    cursorEnd: function( event, cursor ) {
    // trigger onTap callback
    this.onTap( event, cursor );
    this.reset();
    },

    reset: function() {
    window.removeEventListener( cursorMoveEvent, this, false );
    window.removeEventListener( cursorEndEvent, this, false );
    delete this.touch;
    }

    };

    // publicize
    window.addTap = addTap;

    })( window );

    48 changes: 48 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">

    <title>addTap</title>

    <meta name="viewport" content="width=device-width">

    <style>
    body {
    font-family: sans-serif;
    }

    #box {
    width: 200px;
    height: 300px;
    background: red;
    }
    </style>

    </head>
    <body>

    <h1>addTap</h1>


    <div id="box"></div>

    <script src="addtap.js"></script>
    <script>

    window.onload = function() {

    var box = document.getElementById('box');

    function onTap( event, cursor ) {
    console.log( 'did tap', event, cursor.pageX, cursor.pageY );
    }

    addTap( box, onTap, { moveableBuffer: 20 } );

    };

    </script>

    </body>
    </html>
  8. desandro revised this gist Feb 24, 2012. 1 changed file with 3 additions and 5 deletions.
    8 changes: 3 additions & 5 deletions addtap.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /*!
    * addTap - helper function for adding click-ish event for touch devices
    * addTap v1.0.00 - helper function for adding click-ish events for touch devices
    * by David DeSandro
    */

    @@ -29,7 +29,7 @@ addTap.Handler = function( onTap, options ) {
    if ( !onTap ) {
    return;
    }

    // set onTap callback
    this.onTap = onTap;

    @@ -154,9 +154,7 @@ addTap.Handler.prototype = {

    };




    // publicize
    window.addTap = addTap;

    })( window );
  9. desandro revised this gist Feb 24, 2012. 1 changed file with 103 additions and 97 deletions.
    200 changes: 103 additions & 97 deletions addtap.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,9 +12,19 @@ var cursorStartEvent = isTouch ? 'touchstart' : 'mousedown';
    var cursorMoveEvent = isTouch ? 'touchmove' : 'mousemove';
    var cursorEndEvent = isTouch ? 'touchend' : 'mouseup';

    // -------------------------- addTap -------------------------- //

    function addTap( elem, onTap, options ) {

    var handler = new addTap.Handler( onTap, options );

    elem.addEventListener( cursorStartEvent, handler, false );

    }

    // -------------------------- TapHandler -------------------------- //

    function TapHandler( onTap, options ) {
    addTap.Handler = function( onTap, options ) {
    // bail out if onTap callback is not set
    if ( !onTap ) {
    return;
    @@ -26,130 +36,126 @@ function TapHandler( onTap, options ) {
    // set options
    this.options = {};
    // set defaults
    for ( var prop in TapHandler.defaults ) {
    this.options[ prop ] = TapHandler.defaults[ prop ];
    for ( var prop in addTap.Handler.defaults ) {
    this.options[ prop ] = addTap.Handler.defaults[ prop ];
    }
    // overwrite with passed-in options
    for ( prop in options ) {
    this.options[ prop ] = options[ prop ];
    }

    }

    TapHandler.defaults = {
    moveableBuffer: 3
    };

    TapHandler.prototype.handleEvent = function( event ) {
    if ( this[ event.type ] ) {
    this[ event.type ]( event );
    }
    addTap.Handler.defaults = {
    moveableBuffer: 3
    };

    // ----- start ----- //
    addTap.Handler.prototype = {

    TapHandler.prototype.mousedown = function( event ) {
    this.cursorStart( event );
    };
    handleEvent: function( event ) {
    if ( this[ event.type ] ) {
    this[ event.type ]( event );
    }
    },

    TapHandler.prototype.touchstart = function( event ) {
    // bail out if we already have a touch
    if ( this.touch ) {
    return;
    }
    // get first changedTouch
    this.touch = event.changedTouches[0];
    this.cursorStart( this.touch );
    };
    // ----- start ----- //

    TapHandler.prototype.cursorStart = function( cursor ) {
    // set start point
    this.startPoint = {
    x: cursor.pageX,
    y: cursor.pageY
    };
    mousedown: function( event ) {
    this.cursorStart( event );
    },

    // listen for move and end events
    window.addEventListener( cursorMoveEvent, this, false );
    window.addEventListener( cursorEndEvent, this, false );
    };
    touchstart: function( event ) {
    // bail out if we already have a touch
    if ( this.touch ) {
    return;
    }
    // get first changedTouch
    this.touch = event.changedTouches[0];
    this.cursorStart( this.touch );
    },

    cursorStart: function( cursor ) {
    // set start point
    this.startPoint = {
    x: cursor.pageX,
    y: cursor.pageY
    };

    // listen for move and end events
    window.addEventListener( cursorMoveEvent, this, false );
    window.addEventListener( cursorEndEvent, this, false );
    },

    // ----- move ----- //

    mousemove: function( event ) {
    this.cursorMove( event );
    },

    touchmove: function( event ) {
    var matchedTouch = this.getMatchedTouch( event );
    if ( matchedTouch ) {
    this.cursorMove( matchedTouch );
    }
    },

    getMatchedTouch: function( event ) {
    var touch, matchedTouch;
    // iterate through touches
    for ( var i=0, len = event.changedTouches.length; i < len; i++ ) {
    touch = event.changedTouches[i];
    // get matched touch
    if ( touch.identifier === this.touch.identifier ) {
    matchedTouch = touch;
    break;
    }
    }
    return matchedTouch;
    },

    cursorMove: function( cursor ) {
    var moveX = cursor.pageX - this.startPoint.x;
    var moveY = cursor.pageY - this.startPoint.y;

    // check if touch has moved outside buffer zone
    if ( Math.abs( moveX ) > this.options.moveableBuffer ||
    Math.abs( moveY ) > this.options.moveableBuffer
    ) {
    // if outside, then remove listeners, so onTap won't be triggered
    this.reset();
    }

    // ----- move ----- //
    },

    TapHandler.prototype.mousemove = function( event ) {
    this.cursorMove( event );
    };
    // ----- end ----- //

    TapHandler.prototype.touchmove = function( event ) {
    var matchedTouch = this.getMatchedTouch( event );
    if ( matchedTouch ) {
    this.cursorMove( matchedTouch );
    }
    };
    mouseup: function( event ) {
    this.cursorEnd( event, event );
    },

    TapHandler.prototype.getMatchedTouch = function( event ) {
    var touch, matchedTouch;
    // iterate through touches
    for ( var i=0, len = event.changedTouches.length; i < len; i++ ) {
    touch = event.changedTouches[i];
    // get matched touch
    if ( touch.identifier === this.touch.identifier ) {
    matchedTouch = touch;
    break;
    touchend: function( event ) {
    var matchedTouch = this.getMatchedTouch( event );
    if ( matchedTouch ) {
    this.cursorEnd( event, matchedTouch );
    }
    }
    return matchedTouch;
    };
    },

    TapHandler.prototype.cursorMove = function( cursor ) {
    var moveX = cursor.pageX - this.startPoint.x;
    var moveY = cursor.pageY - this.startPoint.y;

    // check if touch has moved outside buffer zone
    if ( Math.abs( moveX ) > this.options.moveableBuffer ||
    Math.abs( moveY ) > this.options.moveableBuffer
    ) {
    // if outside, then remove listeners, so onTap won't be triggered
    cursorEnd: function( event, cursor ) {
    // trigger onTap callback
    this.onTap( event, cursor );
    this.reset();
    }

    };

    // ----- end ----- //
    },

    TapHandler.prototype.mouseup = function( event ) {
    this.cursorEnd( event, event );
    };

    TapHandler.prototype.touchend = function( event ) {
    var matchedTouch = this.getMatchedTouch( event );
    if ( matchedTouch ) {
    this.cursorEnd( event, matchedTouch );
    reset: function() {
    window.removeEventListener( cursorMoveEvent, this, false );
    window.removeEventListener( cursorEndEvent, this, false );
    delete this.touch;
    }
    };

    TapHandler.prototype.cursorEnd = function( event, cursor ) {
    // trigger onTap callback
    this.onTap( event, cursor );
    this.reset();
    };

    TapHandler.prototype.reset = function() {
    window.removeEventListener( cursorMoveEvent, this, false );
    window.removeEventListener( cursorEndEvent, this, false );
    delete this.touch;
    };


    // -------------------------- addTap -------------------------- //

    function addTap( elem, onTap, options ) {

    var handler = new TapHandler( onTap, options );

    elem.addEventListener( cursorStartEvent, handler, false );

    }

    window.addTap = addTap;

  10. desandro created this gist Feb 24, 2012.
    157 changes: 157 additions & 0 deletions addtap.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,157 @@
    /*!
    * addTap - helper function for adding click-ish event for touch devices
    * by David DeSandro
    */

    /*jshint undef: true, forin: false, browser: true */

    (function( window, undefined ){

    var isTouch = 'ontouchstart' in window;
    var cursorStartEvent = isTouch ? 'touchstart' : 'mousedown';
    var cursorMoveEvent = isTouch ? 'touchmove' : 'mousemove';
    var cursorEndEvent = isTouch ? 'touchend' : 'mouseup';

    // -------------------------- TapHandler -------------------------- //

    function TapHandler( onTap, options ) {
    // bail out if onTap callback is not set
    if ( !onTap ) {
    return;
    }

    // set onTap callback
    this.onTap = onTap;

    // set options
    this.options = {};
    // set defaults
    for ( var prop in TapHandler.defaults ) {
    this.options[ prop ] = TapHandler.defaults[ prop ];
    }
    // overwrite with passed-in options
    for ( prop in options ) {
    this.options[ prop ] = options[ prop ];
    }

    }

    TapHandler.defaults = {
    moveableBuffer: 3
    };

    TapHandler.prototype.handleEvent = function( event ) {
    if ( this[ event.type ] ) {
    this[ event.type ]( event );
    }
    };

    // ----- start ----- //

    TapHandler.prototype.mousedown = function( event ) {
    this.cursorStart( event );
    };

    TapHandler.prototype.touchstart = function( event ) {
    // bail out if we already have a touch
    if ( this.touch ) {
    return;
    }
    // get first changedTouch
    this.touch = event.changedTouches[0];
    this.cursorStart( this.touch );
    };

    TapHandler.prototype.cursorStart = function( cursor ) {
    // set start point
    this.startPoint = {
    x: cursor.pageX,
    y: cursor.pageY
    };

    // listen for move and end events
    window.addEventListener( cursorMoveEvent, this, false );
    window.addEventListener( cursorEndEvent, this, false );
    };

    // ----- move ----- //

    TapHandler.prototype.mousemove = function( event ) {
    this.cursorMove( event );
    };

    TapHandler.prototype.touchmove = function( event ) {
    var matchedTouch = this.getMatchedTouch( event );
    if ( matchedTouch ) {
    this.cursorMove( matchedTouch );
    }
    };

    TapHandler.prototype.getMatchedTouch = function( event ) {
    var touch, matchedTouch;
    // iterate through touches
    for ( var i=0, len = event.changedTouches.length; i < len; i++ ) {
    touch = event.changedTouches[i];
    // get matched touch
    if ( touch.identifier === this.touch.identifier ) {
    matchedTouch = touch;
    break;
    }
    }
    return matchedTouch;
    };

    TapHandler.prototype.cursorMove = function( cursor ) {
    var moveX = cursor.pageX - this.startPoint.x;
    var moveY = cursor.pageY - this.startPoint.y;

    // check if touch has moved outside buffer zone
    if ( Math.abs( moveX ) > this.options.moveableBuffer ||
    Math.abs( moveY ) > this.options.moveableBuffer
    ) {
    // if outside, then remove listeners, so onTap won't be triggered
    this.reset();
    }

    };

    // ----- end ----- //

    TapHandler.prototype.mouseup = function( event ) {
    this.cursorEnd( event, event );
    };

    TapHandler.prototype.touchend = function( event ) {
    var matchedTouch = this.getMatchedTouch( event );
    if ( matchedTouch ) {
    this.cursorEnd( event, matchedTouch );
    }
    };

    TapHandler.prototype.cursorEnd = function( event, cursor ) {
    // trigger onTap callback
    this.onTap( event, cursor );
    this.reset();
    };

    TapHandler.prototype.reset = function() {
    window.removeEventListener( cursorMoveEvent, this, false );
    window.removeEventListener( cursorEndEvent, this, false );
    delete this.touch;
    };


    // -------------------------- addTap -------------------------- //

    function addTap( elem, onTap, options ) {

    var handler = new TapHandler( onTap, options );

    elem.addEventListener( cursorStartEvent, handler, false );

    }

    window.addTap = addTap;

    })( window );

    48 changes: 48 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">

    <title>addTap</title>

    <meta name="viewport" content="width=device-width">

    <style>
    body {
    font-family: sans-serif;
    }

    #box {
    width: 200px;
    height: 300px;
    background: red;
    }
    </style>

    </head>
    <body>

    <h1>addTap</h1>


    <div id="box"></div>

    <script src="addtap.js"></script>
    <script>

    window.onload = function() {

    var box = document.getElementById('box');

    function onTap( event, cursor ) {
    console.log( 'did tap', event, cursor.pageX, cursor.pageY );
    }

    addTap( box, onTap, { moveableBuffer: 20 } );

    };

    </script>

    </body>
    </html>