Удалите задержку 300 мс из приложений для телефонных разговоров

Я пытаюсь сделать приложение более отзывчивым, но, к сожалению, ничего не помогает. Я использую PhoneGap, и поэтому я испытываю известную задержка 300 мс для событий касания.

Это делает приложение очень невосприимчивым и медленным, что просто не вариант.

Я видел некоторые библиотеки, такие как Fastclick.js, которые решают эту проблему для мобильных пользователей jQuery, но я не использую jQuery mobile. Я делаю свое приложение только с помощью HTML, CSS, JavaScript и jQuery.

Мне действительно нужно найти способ избавиться от этой задержки в 300 мс для моих кликов по нажатию. Ждем любой помощи, которую я могу получить.

Спасибо.

Ответ 1

Christophe Coenraets рассмотрел этот вопрос в своей 10 лучших технических приемов для приложений PhoneGap. Это №6, а видео доступно на Adobe TV (на 31-й минуте).

В принципе, задержка в 300 мс не является ошибкой или проблемой производительности, это функция, необходимая для обнаружения возможного двойного нажатия.

Решение, чтобы избавиться от этой задержки, заключается в использовании комбинации touch событий вместо события click с чем-то вроде этого:

var trackingClick = false;
var targetElement = null;
var touchStartX = 0;
var touchStartY = 0;
var touchBoundary = 10;

target.addEventListener('touchstart', function(event) {

    trackingClick = true;
    targetElement = event.target;
    touchStartX = event.targetTouches[0].pageX;
    touchStartY = event.targetTouches[0].pageY;

    return true;
});

target.addEventListener('touchend', function(event) {

    trackingClick = false;

    //handle click event
    ...

    return false;
});

target.addEventListener('touchmove', function(event) {
    if (!trackingClick) {
        return true;
    }

    // If the touch has moved, cancel the click tracking
    if (targetElement !== event.target 
        || (Math.abs(event.changedTouches[0].pageX - touchStartX) > touchBoundary 
        || (Math.abs(event.changedTouches[0].pageY - touchStartY) > touchBoundary)) {
        trackingClick = false;
        targetElement = null;
    }

    return true;
});

target.addEventListener('touchcancel', function() {
    trackingClick = false;
    targetElement = null;
});

Но это в основном то, что делает FastClick (на самом деле приведенный выше фрагмент - это всего лишь очень простой пример, сорванный с fastclick исходный код). Есть много других дел для обработки, поэтому, если вы не хотите использовать свою собственную библиотеку, вам следует по-настоящему взглянуть на FastClick. Это не только для мобильных пользователей jQuery, на самом деле ему даже не нужен jQuery, это просто автономная небольшая библиотека.

Примечание для мобильных пользователей jQuery: вы можете использовать FastClick, но вы должны знать о встроенной подобной функции: vclick

tl; dr: используйте FastClick, если у вас нет jQuery Mobile

Ответ 2

Fastclick не работает для меня. Возможно, он не поддерживает Phonegap или веб-просмотр, который он использует.

Единственный способ исправить задержку в 300 мс в Phonegap/cordova:

$('yourElement').on( 'touchstart', function ( startEvent ) {});

вместо onclick. Любые другие решения, в том числе fastclick, не работали в Phonegap.

Ответ 3

Я решил это с помощью супер минимального решения после некоторых проблем с fastclick при запуске событий щелчка. В этом примере используется jQuery.

$(document).on('touchstart', '.clickable', function(e){
    // This prevents the click to be completed
    // so will prevent the annoying flickering effect
    e.preventDefault();
});

Вы должны добавить класс .clickable к любому элементу, который вы хотите удалить задержка 300 м.

Затем измените все события click для событий touchstart, так что это

$('#elementid').click(function(e){
   console.log('ex event'); 
}

должен быть теперь

$(document).on('touchstart', '#elementid', function(e){
   console.log('new event'); 
}