添加iPhone OS事件的jQuery样式事件处理程序

Question

我正在寻找一个超级简单的jQuery扩展.基本上我需要使用jQuery没有明确支持的一些事件.这些事件是iPhone的触摸事件,如ontouchstart,ontouchend和ontouchmove.

我通过这个工作:

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

哪种糟透,不合情理.这就是我想要的:

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

或者甚至更好1.4

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

这些事件不需要特殊处理,并且应该像任何其他事件一样工作,但我似乎无法弄清楚如何扩展jquery以使它们像所有其他事件一样工作.

Answer 1

我写了插件,如果用户确实有触摸可用,请使用,否则,请点击

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