Проверка, если touchhend появляется после перетаскивания

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

Как я могу проверить, пришел ли прикосновение в результате касания? Я попробовал отслеживать dragstart и dragend, но я не мог заставить это работать, и это кажется неэлегантным подходом. Есть ли что-то, что я мог бы добавить ниже, что, по существу, определило бы: "Это коснулось конца перетаскивания?"

$("#resultTable").on("touchend","#resultTable td",function(){ 
        $(this).toggleClass('stay');
});

Заранее благодарю вас за помощь.

PS - используя последний jquery, и, хотя обычный клик работает, он очень медленный по сравнению с touchhend.

Ответ 1

Используйте два прослушивателя:

Сначала установите переменную в false:

var dragging = false;

Затем ontouchmove установите перетаскивание в true

$("body").on("touchmove", function(){
      dragging = true;
});

Затем при завершении перетаскивания проверьте, истинно ли перетаскивание, и если это так считать перетаскиванием:

$("body").on("touchend", function(){
      if (dragging)
          return;

      // wasn't a drag, just a tap
      // more code here
});

Прикосновение будет по-прежнему срабатывать, но будет завершено до того, как будет запущен ваш тэг script.

Чтобы убедиться, что в следующий раз, когда вы коснетесь, он еще не установлен как перетаскиваемый, reset он возвращается к false при касании вниз.

$("body").on("touchstart", function(){
    dragging = false;
});

Ответ 2

Похоже, что одно решение моей проблемы находится здесь:

http://alxgbsn.co.uk/2011/08/16/event-delegation-for-touch-events-in-javascript/

Этот бит кода обнаруживает любое движение после touchstart, чтобы прервать поведение прикосновения после записи.

var tapArea, moved, startX, startY;

tapArea = document.querySelector('#list'); //element to delegate
moved = false; //flags if the finger has moved
startX = 0; //starting x coordinate
startY = 0; //starting y coordinate

//touchstart           
tapArea.ontouchstart = function(e) {

    moved = false;
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
};

//touchmove    
tapArea.ontouchmove = function(e) {

    //if finger moves more than 10px flag to cancel
    //code.google.com/mobile/articles/fast_buttons.html
    if (Math.abs(e.touches[0].clientX - startX) > 10 ||
        Math.abs(e.touches[0].clientY - startY) > 10) {
            moved = true;
    }
};

//touchend
tapArea.ontouchend = function(e) {

    e.preventDefault();

    //get element from touch point
    var element = e.changedTouches[0].target;

    //if the element is a text node, get its parent.
    if (element.nodeType === 3) { 
        element = element.parentNode;
    }

    if (!moved) {
        //check for the element type you want to capture
        if (element.tagName.toLowerCase() === 'label') {
            alert('tap');
        }
    }
};

//don't forget about touchcancel!
tapArea.ontouchcancel = function(e) {

    //reset variables
    moved = false;
    startX = 0;
    startY = 0;
};

Подробнее здесь: https://developers.google.com/mobile/articles/fast_buttons

Ответ 3

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

Ответ 4

Это может помочь сократить решение @lededge.

$("body").on("touchmove", function(){
   dragging = true;
}).on("touchend", function(){
   if (dragging)
      return;
}).on("touchstart", function(){
   dragging = false;
});