it-roy-ru.com

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

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

27
Luke Dennis

Это было сообщено в jQuery как ошибка, но поскольку двойное нажатие не то же самое, что двойное нажатие, оно не имеет высокого приоритета. Тем не менее, главный разработчик Рауль Санчес разработал решение jquery для doubletap, которое вы, вероятно, можете использовать! Вот ссылка , работает на мобильном Safari.

Это легко использовать:

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

-Правка-

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

19
rsplak

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

Тем не менее, он реализует только jQuery функцию двойного тапа

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

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

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

Поэтому я взял работу Рауля Санчеса и превратил ее в «специальное мероприятие jQuery».

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

11
asgeo1

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

Для longtap:

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

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

Для двойного нажатия:

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

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

Просто используйте мультитач 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, если вы хотите, чтобы я мог писать так же, как я.

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

6
David Johnstone

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

$('#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 запускаются с прикосновением пальца. Если это не так, то замените любой подходящий метод ... Я не очень знаком с разработкой мобильных приложений.

2
eykanal

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

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

0
Attenzione
 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);
0
tdjprog