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

Ответ 1

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

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

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

-edit -

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

Ответ 2

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

Однако он реализует только функцию jQuery doubletap

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

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

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

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

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

Ответ 3

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

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

Ответ 4

Вы также можете использовать 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 */ });

Ответ 5

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

Ответ 6

на основе последних jquery docs я написал событие doubletap

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

Ответ 7

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