Добавление обработчика событий в стиле jQuery для событий iPhone OS

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

Я сделал небольшое обновление для плагина Александра, чтобы включить поддержку Android. Браузер Android в настоящее время не поддерживает окно. Сенсорный метод определения поддержки касания.

Мне нравится, как сценарий Александра ожидает, чтобы движение не происходило, чтобы предотвратить запуск события, когда пользователь проводит прокруткой по экрану. Однако недостаток этого подхода заключается в том, что он вызывает собственную задержку, ожидая, пока пользователь не уберет палец с экрана перед запуском. Я обновил его плагин, добавив в него «сенсорный» класс, который применяется к элементам, к которым пользователь в данный момент прикасается. Если вы воспользуетесь этим классом, вы сможете немедленно предоставить визуальную обратную связь пользователям, не вызывая фактического события до тех пор, пока проверка движения не будет завершена.

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. Go 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 - отличный источник такой информации.

Если вы создадите свой собственный плагин , вы сможете использовать любые имена, которые вам нравятся, в вызовах методов.