Adding an iPhone OS jQuery-style event handler

Question

I am looking for a super simple jQuery extension. Basically I need to use some events that jQuery does not explicitly support. These events are iPhone touch events such as ontouchstart, ontouchendand ontouchmove.

It works for me through this:

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

What a nipple and unsatisfied. 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 do not require special handling and should work just like any other events, but I cannot figure out how to extend jquery to make them work the same as all other events.

Answer 1

, jQuery. jQuery!

Answer 2

, , , ,

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");
});

Answer 3

Alexandre, Android. Android- . .

, Alexandre script , , , . , , , . , "" , , . , , .

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');
    }
};

github , , https://github.com/tuxracer/jquery-touchclick

Answer 4

:

$.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);
    }
};

extendedClickHandler - , , .

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

Answer 5

jQuery.com - , .

, , , .