JavaScript на iOS: предотвращение дефолта при сенсорном запуске без отключения прокрутки

Question

Я работаю с JavaScript и jQuery в UIWevView на iOS.

Я добавил обработчик событий javascript, который позволяет мне захватывать событие касания и удержания, чтобы показать сообщение, когда кто-то нажимает на img в течение некоторого времени:

$(document).ready(function() {

    var timeoutId = 0;
    var messageAppeared = false;

    $('img').on('touchstart', function(event) {

        event.preventDefault();
        timeoutId = setTimeout(function() {           

            /* Show message ... */
            messageAppeared = true;

        }, 1000);

    }).on('touchend touchcancel', function(event) {                                

        if (messageAppeared) {
            event.preventDefault();
        } else {
            clearTimeout(timeoutId);
        }
        messageAppeared = false;        
    });
});

Это хорошо работает, чтобы показать сообщение. Я добавил два "event.preventDefault ();" строки, чтобы остановить imgs внутри ссылки, чтобы вызвать ссылку.

Проблема в том, что это также препятствует тому, чтобы события перетаскивания для прокрутки страницы происходили нормально, так что пользователь не мог бы прокручивать, когда его свипирование начинается на изображении.

Как можно отключить действие ссылки по умолчанию, не мешая прокрутке?

Answer 1

Вы поставили меня на правильный путь, Стефан, заставив меня думать иначе.Для тех, кто все еще ломает голову над этим, вот мое решение.

Я пытался позволить посетителям прокручивать изображения по горизонтали, не прерывая вертикальную прокрутку.Но я выполнял пользовательские функции и ждал вертикальной прокрутки.Вместо этого мы должны сначала разрешить обычное поведение и ждать, пока не произойдет определенный жест, как это сделал Стефан.

Например:

$("img").on("touchstart", function(e) {
    var touchStart = touchEnd = e.originalEvent.touches[0].pageX;

    var touchExceeded = false;

    $(this).on("touchmove", function(e) {
        touchEnd = e.originalEvent.touches[0].pageX;

        if(touchExceeded || touchStart - touchEnd > 50 || touchEnd - touchStart > 50) {
            e.preventDefault();

            touchExceeded = true;

            // Execute your custom function.
        }
    });

    $(this).on("touchend", function(e) {
        $(this).off("touchmove touchend");
    });
});

Таким образом, в основном мы разрешаем поведение по умолчанию, пока горизонтальное движение не превысит 50пикселей.

Переменная touchExceeded гарантирует, что наша функция по-прежнему будет работать, если мы повторно введем начальную область <50 пикселей. </p>

(Обратите внимание, что это пример кода, e.originalEvent.touches[0].pageX НЕ пересекаетсясовместимый с браузером.)

Answer 2

Иногда вам нужно задать вопрос о переполнении стека, чтобы найти ответ самостоятельно.У меня действительно есть решение моей проблемы, и оно заключается в следующем:

$(document).ready(function() {

    var timeoutId = 0;

    $('img').on('touchstart', function(event) {

        var imgElement = this;

        timeoutId = setTimeout(function() {           

            $(imgElement).one('click', function(event) {
                event.preventDefault();
            });

            /* Show message ... */

        }, 1000);

    }).on('touchend touchcancel', function(event) {                                
        clearTimeout(timeoutId);
    });
});

Пояснение

• В обработчиках событий прикосновения нет функции protectDefault ().Это возвращает поведение прокрутки (конечно).
• Обрабатывать обычное событие нажатия один раз, если сообщение появилось, и предотвратить это действие по умолчанию.

Answer 3

Вы можете посмотреть библиотеку жестов, например hammer.js , которая охватывает все основные события жестов на устройствах.