Как лучше всего обрабатывать события longtap и double-tap на мобильных устройствах с помощью jQuery?

Question

Я ищу лучшее решение для добавления событий "doubletap" и "longtap" для использования с jQuery live (), bind () и trigger (). Я накатил свое собственное быстрое решение, но оно немного глючит. Есть ли у кого-нибудь плагины, которые он бы порекомендовал, или собственные дополнения, которыми они хотели бы поделиться?

Answer 1

Об этом сообщили в jQuery как об ошибке, но двойное нажатие не то же самое, что двойное нажатие, оно не имеет высокого приоритета. Тем не менее, вдохновитель Рауль Санчес (Juline Raul Sanchez) разработал JQuery решение для DoubleTap, которое вы можете использовать Вот ссылка , работает на мобильном Safari.

Это просто в использовании:

$('selector').doubletap(function() {});

-edit-

А здесь есть плагин для длинных контактов здесь ! Вы можете увидеть демо на вашем iPad или iPhone здесь .

Answer 2

Ответ Рсплака хорош.Я проверил эту ссылку, и она работает хорошо.

Тем не менее, она реализует только функцию jQuery DoubleTap

Мне нужно пользовательское событие doubletap что я мог связать / делегировать.т.е.

$('.myelement').bind('doubletap', function(event){
    //...
});

Это более важно, если вы пишете приложение в стиле backbone.js, где происходит много привязок к событиям.

Итак, я взял работу Рауля Санчеса,и превратил его в «специальное событие jQuery».

Посмотрите здесь: https://gist.github.com/1652946 Может быть кому-нибудь пригодится.

Answer 3

Вы также можете использовать jQuery Finger , который также поддерживает делегирование событий:

Для longtap :

// direct event
$('selector').on('press', function() { /* handle event */ });

// delegated event
$('ancestor').on('press', 'selector', function() { /* handle event */ });

Для doubleнажмите :

// direct event
$('selector').on('doubletap', function() { /* handle event */ });

// delegated event
$('ancestor').on('doubletap', 'selector', function() { /* handle event */ });

Answer 4

Просто используйте мультитач-библиотеку JavaScript, например Hammer.js .Затем вы можете написать код, например:

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // Also fires on double click
        // Generate a pony
    })
    .bind('hold', function(e) {
        // Generate a unicorn
    });

Он поддерживает касание, двойное касание, пролистывание, удержание, преобразование (т.е. сжатие) и перетаскивание.События касания также запускаются, когда происходят эквивалентные действия мыши, поэтому вам не нужно писать два набора обработчиков событий.Да, и вам нужен плагин jQuery, если вы хотите писать jQueryish так, как я.

Я написал очень похожий ответ на этот вопрос , потому чтотакже очень популярен, но не очень хорошо ответил.

Answer 5

Вот довольно простое описание функции, которую вы можете расширить для длинного тапа:

$('#myDiv').mousedown(function() {
    var d = new Date;
    a = d.getTime();
});

$('#myDiv').mouseup(function() {
    var d = new Date;
    b = d.getTime();

    if (b-a > 500) {
        alert('This has been a longtouch!');
    }
});

Продолжительность можно определить с помощью блока if в функции mouseup.Это, вероятно, может быть увеличено при хорошей сделке.У меня есть jsFiddle , настроенный для тех, кто хочет поиграть с ним.

РЕДАКТИРОВАТЬ: Я только что понял, что это зависит от того, что mousedown и mouseup запускаются с прикосновением пальцев.Если это не так, тогда замените его подходящим методом ... Я не очень знаком с разработкой мобильных приложений.

Answer 6

 function itemTapEvent(event) {
    if (event.type == 'touchend') {
        var lastTouch = $(this).data('lastTouch') || {lastTime: 0},
            now       = event.timeStamp,
            delta     = now - lastTouch.lastTime;

            if ( delta > 20 && delta < 250 ) {
                if (lastTouch.timerEv)
                  clearTimeout(lastTouch.timerEv);
                return;
            } else
                $(this).data('lastTouch', {lastTime: now});

            $(this).data('lastTouch')['timerEv'] = setTimeout(function() {
                $(this).trigger('touchend');
            }, 250);
    }
    }

    $('selector').bind('touchend', itemTapEvent);

Answer 7

на основе последних документов JQuery, я написал событие двойной записи

https://gist.github.com/attenzione/7098476