Ajout d'un gestionnaire d'événements de style jQuery pour les événements de l'iPhone OS

Question

Je suis à la recherche d'une extension jQuery super simple. En fait, j'ai besoin d'utiliser certains événements que jQuery ne prend pas explicitement en charge. Ces événements sont les événements iPhone touch comme ontouchstart , ontouchend et ontouchmove .

Je l'ai fait fonctionner comme ça :

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

Ce qui craint et n'est pas digne de Jquery. Voici ce que je voudrais :

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

Ou encore mieux avec 1.4

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

Ces événements ne nécessitent aucune manipulation particulière et devraient fonctionner comme tous les autres événements, mais je n'arrive pas à trouver comment étendre jquery pour qu'ils fonctionnent comme tous les autres événements.

Answer 1

J'ai écrit le plugin, si l'utilisateur a le toucher disponible, utiliser, sinon, appeler 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");
});

Answer 2

J'ai fait une petite mise à jour du plugin d'Alexandre pour inclure le support Android. Le navigateur d'Android ne supporte pas actuellement la méthode window.Touch pour détecter le support tactile.

J'aime la façon dont le script d'Alexandre attend pour s'assurer qu'il n'y a pas eu de mouvement afin d'éviter de déclencher l'événement lorsque l'utilisateur glisse pour faire défiler l'écran. Cependant, un inconvénient de cette approche est qu'elle provoque son propre retard en attendant que l'utilisateur lève son doigt de l'écran avant de déclencher. J'ai mis à jour son plugin pour inclure une classe "touchactive" qui est appliquée aux éléments que l'utilisateur est en train de toucher. Si vous tirez parti de cette classe, vous pouvez fournir un retour visuel immédiat aux utilisateurs sans déclencher un événement réel jusqu'à ce que la vérification du mouvement soit terminée.

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

J'ai également publié ce document sur github au cas où d'autres problèmes seraient découverts. https://github.com/tuxracer/jquery-touchclick

Answer 3

Cela fonctionne maintenant, comme c'est indiqué ci-dessus, sur la dernière version de jQuery. Allez jQuery !

Answer 4

Voici un début :

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

Où extendedClickHandler est la fonction qui fait ce qu'elle est censée faire.

Plus d'informations ici : http://brandonaaron.net/blog/2009/03/26/special-events

Answer 5

JQuery.com est une excellente source d'informations de ce type.

Si vous construisez votre propre plugin vous pourrez utiliser la dénomination de votre choix pour vos appels de méthode.