Adding a jQuery style event handler of iPhone OS events

Question

I'm looking for a super simple jQuery extension. Basically I need to use some events that jQuery does not explicitly support. These events are the iPhone touch events like ontouchstart, ontouchend, and ontouchmove.

I have it working via this:

// Sucks
$('.clickable').each(function() {
  this.ontouchstart = function(event) {
    //do stuff...
  };
}

Which kind of sucks and is unjqueryish. Here is what I would like:

// Better
$('.clickable').touchstart(function() {
  //do stuff...
}

Or even better with 1.4

// Awesome
$('.clickable').live('touchstart', function() {
  //.. do stuff
}

These events need no special handling and should work just like any other events, but I can't seem to figure out how to extend jquery to make them work just like all the other events do.

Actually, is there a difference between doing live('touchstart', ...); and doing bind('touchstart', ...); ? — Avisra, May 19 '11 at 19:13
Yep: http://stackoverflow.com/questions/2690370/live-vs-bind — Alex Wayne, May 19 '11 at 19:29

score 5 · Answer 1 · edited Feb 17 '13 at 23:15

I wrote the plugin, if the user does have touch available, use, otherwise, call click

jQuery.event.special.tabOrClick = {
    setup: function (data, namespaces) {
        var elem = this, $elem = jQuery(elem);

        if (window.Touch) {
            $elem.bind('touchstart', jQuery.event.special.tabOrClick.onTouchStart);
            $elem.bind('touchmove', jQuery.event.special.tabOrClick.onTouchMove);
            $elem.bind('touchend', jQuery.event.special.tabOrClick.onTouchEnd);
        } else {
            $elem.bind('click', jQuery.event.special.tabOrClick.click);
        }
    },

    click: function (event) {
        event.type = "tabOrClick";
        jQuery.event.handle.apply(this, arguments);
    },

    teardown: function (namespaces) {
        var elem = this, $elem = jQuery(elem);
        if (window.Touch) {
            $elem.unbind('touchstart', jQuery.event.special.tabOrClick.onTouchStart);
            $elem.unbind('touchmove', jQuery.event.special.tabOrClick.onTouchMove);
            $elem.unbind('touchend', jQuery.event.special.tabOrClick.onTouchEnd);
        } else {
            $elem.unbind('click', jQuery.event.special.tabOrClick.click);
        }
    },

    onTouchStart: function (e) {
        this.moved = false;
    },

    onTouchMove: function (e) {
        this.moved = true;
    },

    onTouchEnd: function (event) {
        if (!this.moved) {
            event.type = "tabOrClick";
            jQuery.event.handle.apply(this, arguments)
        }
    }
};

$("#xpto").bind("tabOrClick", function () {
    alert("aaaa");
});

score 4 · Answer 2 · edited Aug 16 '12 at 15:36

I've made a small update to Alexandre's plugin to include Android support. Android's browser does not currently support the window.Touch method of detecting touch support.

I love how Alexandre's script waits to ensure movement didn't occur to prevent triggering the event when the user swipes to scroll across the screen. However a downfall of that approach is that it causes its own delay by waiting for the user to lift their finger off of the screen before triggering. I've updated his plugin to include a "touchactive" class that gets applied to items that a user is currently touching. If you take advantage of that class you can provide immediate visual feedback to users without causing an actual event to get triggered until after movement check has completed.

jQuery.event.special.touchclick = {
    setup: function (data, namespaces) {
    var elem = this, $elem = jQuery(elem);

    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1;

    if (window.Touch || isAndroid) {
            $elem.bind('touchstart', jQuery.event.special.touchclick.onTouchStart);
            $elem.bind('touchmove', jQuery.event.special.touchclick.onTouchMove);
            $elem.bind('touchend', jQuery.event.special.touchclick.onTouchEnd);
        } else {
            $elem.bind('click', jQuery.event.special.touchclick.click);
        }
    },

    click: function (event) {
        event.type = "touchclick";
        jQuery.event.handle.apply(this, arguments);
    },

    teardown: function (namespaces) {
        var elem = this, $elem = jQuery(elem);
        if (window.Touch) {
            $elem.unbind('touchstart', jQuery.event.special.touchclick.onTouchStart);
            $elem.unbind('touchmove', jQuery.event.special.touchclick.onTouchMove);
            $elem.unbind('touchend', jQuery.event.special.touchclick.onTouchEnd);
        } else {
            $elem.unbind('click', jQuery.event.special.touchclick.click);
        }
    },

    onTouchStart: function (e) {
        this.moved = false;

        $(this).addClass('touchactive');
    },

    onTouchMove: function (e) {
        this.moved = true;

        $(this).removeClass('touchactive');
    },

    onTouchEnd: function (event) {
        if (!this.moved) {
            event.type = "touchclick";
            jQuery.event.handle.apply(this, arguments)
        }

        $(this).removeClass('touchactive');
    }
};

I've also posted this to github in case there are further caveats that are discovered https://github.com/tuxracer/jquery-touchclick

score 2 · Accepted Answer · answered Oct 23 '10 at 00:51

2

This now works, just like it's stubbed out above, on the latest jQuery release. Go jQuery!

answered Oct 23 '10 at 00:51

Alex Wayne

178,991
47
309
337

In my original post. `$('.clickable').live('touchstart', fn)` works awesome on jquery 1.4.2 and up. `bind` works as well. – Alex Wayne Nov 06 '10 at 06:05

jerone · Answer 4 · 2010-01-25T20:12:51.523

Here's a start:

$.fn.touchstart = function(fn) { return this[fn ? "bind" : "trigger"]("touchstart", fn); };
$.event.special.touchstart = {
    setup: function() {
        $.event.add(this, "mouseenter", extendedClickHandler, {});
    },
    teardown: function() {
        $.event.remove(this, "mouseenter", extendedClickHandler);
    }
};

Where extendedClickHandler is the function that does what it's suppose to do.

More info here: http://brandonaaron.net/blog/2009/03/26/special-events

score 0 · Answer 5 · answered Jan 25 '10 at 19:46

0

jQuery.com is a great source of information like this.

If you build your own plugin you'll be able to use whatever naming you like on your method calls.

answered Jan 25 '10 at 19:46

Tristan Warner-Smith

9,631
6
46
75

I was hoping to simply piggy back all the existing event handling and just add support for a few more event types. There is nothing special about these that would require special handling beyond what click or mousedown do. – Alex Wayne Jan 25 '10 at 19:49

Adding a jQuery style event handler of iPhone OS events

5 Answers5