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

Answer 2

我对Alexandre的插件做了一个小小的更新，包括Android支持。 Android的浏览器目前不支持window.Touch检测触摸支持的方法。

我喜欢Alexandre的脚本如何等待以确保在用户滑动以在屏幕上滚动时不会发生移动以防止触发事件。然而，这种方法的缺点是它会在触发之前等待用户将手指从屏幕上抬起而导致其自身的延迟。我已经更新了他的插件，以包含一个“touchactive”类，它可以应用于用户当前正在触摸的项目。如果您利用该课程，您可以向用户提供即时视觉反馈，而不会导致实际事件在移动检查完成之后被触发。

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 3

这就像最新的jQuery版本一样，就像上面的内容一样。去jQuery！

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是一个很好的信息来源。

如果您构建了own plugin，则可以在方法调用中使用您喜欢的任何命名。

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

5 个答案: