Обнаружение левого/правого пальца на сенсорных устройствах, но разрешить прокрутку вверх/вниз

Ответ 1

Я написал свой собственный обработчик сенсорных событий. Может быть, это поможет вам

он проверяет:

быстрый щелчок: "фк"

проведите пальцем влево: "swl"

проведите вправо: "SWR"

проведите вверх: 'Swu'

проведите вниз: "SWD"

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

вам нужно SWL SWR, я также предлагаю использовать fc (fastclick) для событий щелчка... это намного быстрее, чем обычный щелчок.

window.onload = function() {
    (function(d) {
        var
            ce = function(e, n) {
                var a = document.createEvent("CustomEvent");
                a.initCustomEvent(n, true, true, e.target);
                e.target.dispatchEvent(a);
                a = null;
                return false
            },
            nm = true,
            sp = {
                x: 0,
                y: 0
            },
            ep = {
                x: 0,
                y: 0
            },
            touch = {
                touchstart: function(e) {
                    sp = {
                        x: e.touches[0].pageX,
                        y: e.touches[0].pageY
                    }
                },
                touchmove: function(e) {
                    nm = false;
                    ep = {
                        x: e.touches[0].pageX,
                        y: e.touches[0].pageY
                    }
                },
                touchend: function(e) {
                    if (nm) {
                        ce(e, 'fc')
                    } else {
                        var x = ep.x - sp.x,
                            xr = Math.abs(x),
                            y = ep.y - sp.y,
                            yr = Math.abs(y);
                        if (Math.max(xr, yr) > 20) {
                            ce(e, (xr > yr ? (x < 0 ? 'swl' : 'swr') : (y < 0 ? 'swu' : 'swd')))
                        }
                    };
                    nm = true
                },
                touchcancel: function(e) {
                    nm = false
                }
            };
        for (var a in touch) {
            d.addEventListener(a, touch[a], false);
        }
    })(document);
    //EXAMPLE OF USE
    var h = function(e) {
        console.log(e.type, e)
    };
    document.body.addEventListener('fc', h, false); // 0-50ms vs 500ms with normal click
    document.body.addEventListener('swl', h, false);
    document.body.addEventListener('swr', h, false);
    document.body.addEventListener('swu', h, false);
    document.body.addEventListener('swd', h, false);
}

в этом случае h - мой обработчик для каждого типа события, и я добавляю обработчики в тело.

за то, что я понимаю твой вопрос, ты просто должен написать

YOURELEMENT.addEventListener('swr',YOURSWIPERIGHTFUNCTION,false);
YOURELEMENT.addEventListener('swl',YOURSWIPELEFTFUNCTION,false);

для обработки нескольких элементов и одной и той же функции... просто добавьте один обработчик.

так что если у вас есть

<ul id="ul"><li>1</li><li>2</li><li>3</li></ul>

ты сделаешь:

var deleteli=function(e){
    var li=e.target;
    console.log('deleting '+li.textContent);
}
document.getElementById('ul').addEventListener('swl',deleteli,false);

то же самое для fc & swr

В ios есть ошибка: не используйте alert().. она будет выполнена 2 раза.

Ответ 2

В принятом ответе есть "ошибка". Если вы не используете Chrome на Android, но, например, в браузере или в веб-браузере (например, для html5-гибридного приложения), прокрутка не обнаруживается.

Я узнал, что событие не срабатывает из-за обычного поведения прокрутки. Поэтому добавление "e.preventDefault();" в touchmove зафиксировал бы это или исправление от Эрика Фуллера в принятом ответе.

Это хорошо отрезанное, но в мобильном WebApp или веб-сайте это может привести к плохому прокрутке прокрутки, потому что сенсорные события наблюдаются все время.

Итак, я решил построить что-то новое. Это не так удобно, как иметь новых слушателей событий, но это достаточно удобно для моих потребностей, и это выполняется.

function detectswipe(el,func) {
  swipe_det = new Object();
  swipe_det.sX = 0;
  swipe_det.sY = 0;
  swipe_det.eX = 0;
  swipe_det.eY = 0;
  var min_x = 20;  //min x swipe for horizontal swipe
  var max_x = 40;  //max x difference for vertical swipe
  var min_y = 40;  //min y swipe for vertical swipe
  var max_y = 50;  //max y difference for horizontal swipe
  var direc = "";
  ele = document.getElementById(el);
  ele.addEventListener('touchstart',function(e){
    var t = e.touches[0];
    swipe_det.sX = t.screenX; 
    swipe_det.sY = t.screenY;
  },false);
  ele.addEventListener('touchmove',function(e){
    e.preventDefault();
    var t = e.touches[0];
    swipe_det.eX = t.screenX; 
    swipe_det.eY = t.screenY;    
  },false);
  ele.addEventListener('touchend',function(e){
    //horizontal detection
    if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y)))) {
      if(swipe_det.eX > swipe_det.sX) direc = "r";
      else direc = "l";
    }
    //vertical detection
    if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x)))) {
      if(swipe_det.eY > swipe_det.sY) direc = "d";
      else direc = "u";
    }

    if (direc != "") {
      if(typeof func == 'function') func(el,direc);
    }
    direc = "";
  },false);  
}

myfunction(el,d) {
  alert("you swiped on element with id '"+el+"' to "+d+" direction");
}

Чтобы использовать функцию, просто используйте ее как

detectswipe('an_element_id',myfunction);

detectswipe('an_other_element_id',my_other_function);

Если обнаружен пробой, функция "myfunction" вызывается с параметром-id и "l, r, u, d" (слева, справа, вверх, вниз).

Пример: http://jsfiddle.net/rvuayqeo/1/

Ответ 3

Все эти коды нуждаются в улучшении (например, большинство кодов, которые вы можете найти при манипуляции сенсорными клавишами).

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

Итак, процесс относительно прост:

• ontouchstart: получите первое измененное касание (не event.originalEvent.touches свойство, но event.originalEvent.changedTouches one). Зарегистрируйте свой идентификатор с помощью event.originalEvent.changedTouches[0].identifier и коснитесь свойств для поиска (pageX/pageY или clientX/clientY, которые очень полезны в сочетании с методом DOMElement.getBoundingClientRect());

• ontouchmove: убедитесь, что текущее касание находится в списке changedTouches с помощью event.originalEvent.changedTouches.identifiedTouch( identifier ). Если он ничего не возвращает, это означает, что пользователь переместил другое касание (а не тот, который вы ищете). Также регистрируйте свойства касания, чтобы искать и делать все, что хотите.

• ontouchend: опять же, вы должны быть уверены, что текущее касание находится в списке changedTouches. Сделайте работу с сенсорными свойствами и, наконец, отбросьте свой текущий идентификатор касания.

Если вы хотите сделать это сильнее, рассмотрите несколько касаний (не только один) для наблюдения.

Дополнительная информация о TouchEvent, TouchList и Touch on: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

Ответ 4

Вдохновленный @cocco, я создал лучшую (не минимизированную) версию:

(function(d) {
    // based on original source: https://stackoverflow.com/a/17567696/334451
    var newEvent = function(e, name) {
        // This style is already deprecated but very well supported in real world: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent
        // in future we want to use CustomEvent function: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
        var a = document.createEvent("CustomEvent");
        a.initCustomEvent(name, true, true, e.target);
        e.target.dispatchEvent(a);
        a = null;
        return false
    };
    var debug = false; // emit info to JS console for all touch events?
    var active = false; // flag to tell if touchend should complete the gesture
    var min_gesture_length = 20; // minimum gesture length in pixels
    var tolerance = 0.3; // value 0 means pixel perfect movement up or down/left or right is required, 0.5 or more means any diagonal will do, values between can be tweaked

    var sp = { x: 0, y: 0, px: 0, py: 0 }; // start point
    var ep = { x: 0, y: 0, px: 0, py: 0 }; // end point
    var touch = {
        touchstart: function(e) {
            active = true;
            t = e.touches[0];
            sp = { x: t.screenX, y: t.screenY, px: t.pageX, py: t.pageY };
            ep = sp; // make sure we have a sensible end poin in case next event is touchend
            debug && console.log("start", sp);
        },
        touchmove: function(e) {
            if (e.touches.length > 1) {
                active = false;
                debug && console.log("aborting gesture because multiple touches detected");
                return;
            }
            t = e.touches[0];
            ep = { x: t.screenX, y: t.screenY, px: t.pageX, py: t.pageY };
            debug && console.log("move", ep, sp);
        },
        touchend: function(e) {
            if (!active)
                return;
            debug && console.log("end", ep, sp);
            var dx = Math.abs(ep.x - sp.x);
            var dy = Math.abs(ep.y - sp.y);

            if (Math.max(dx, dy) < min_gesture_length) {
                debug && console.log("ignoring short gesture");
                return; // too short gesture, ignore
            }

            if (dy > dx && dx/dy < tolerance && Math.abs(sp.py - ep.py) > min_gesture_length) { // up or down, ignore if page scrolled with touch
                newEvent(e, (ep.y - sp.y < 0 ? 'gesture-up' : 'gesture-down'));
                //e.cancelable && e.preventDefault();
            }
            else if (dx > dy && dy/dx < tolerance && Math.abs(sp.px - ep.px) > min_gesture_length) { // left or right, ignore if page scrolled with touch
                newEvent(e, (ep.x - sp.x < 0 ? 'gesture-left' : 'gesture-right'));
                //e.cancelable && e.preventDefault();
            }
            else {
                debug && console.log("ignoring diagonal gesture or scrolled content");
            }
            active = false;
        },
        touchcancel: function(e) {
            debug && console.log("cancelling gesture");
            active = false;
        }
    };
    for (var a in touch) {
        d.addEventListener(a, touch[a], false);
        // TODO: MSIE touch support: https://github.com/CamHenlin/TouchPolyfill
    }
})(window.document);

Важные изменения по сравнению с оригинальной версией @cocco:

• используйте event.touches[0].screenX/screenY в качестве основного источника информации. pageX/pageY не правильно отображают движение касаний на экране, потому что если какой-то фрагмент страницы прокручивается касанием, это также влияет на значения pageX/pageY.
• добавить настройку минимальной длины жеста
• добавить настройку допуска для игнорирования жестов рядом с диагональю
• игнорировать жест, если содержимое страницы прокручивалось с помощью жеста (проверьте разницу в pageX/pageY до запуска жеста)
• отменить жест, если во время жеста выполняется несколько касаний

Что нужно сделать в будущем:

• используйте интерфейс функции CustomEvent() вместо метода createEvent().
• добавить совместимость MSIE
• Может быть, настроить минимальную длину жеста для pageX/pageY отдельно от screenX/screenY?
• Кажется, что прокрутка Chrome с резьбой все еще вызывает некоторые проблемы с обнаружением прокрутки, если движение касания слишком быстрое. Возможно, дождитесь следующего кадра, прежде чем решить, куда пошла прокрутка, прежде чем решить, следует ли инициировать событие?

Использование заключается в следующем:

document.body.addEventListener('gesture-right', function (e) {  ... });

или стиль JQuery

$("article").on("gesture-down", function (e) { ... });

Ответ 5

Обнаружение влево и вправо при касании неподвижное.

Это делается с сохранением последней позиции и использованием таймаута для удаления последней позиции после остановки сенсорной остановки.

var currentX;
var lastX = 0;
var lastT;
$(document).bind('touchmove', function(e) {
    // If still moving clear last setTimeout
    clearTimeout(lastT);

    currentX = e.originalEvent.touches[0].clientX;

    // After stoping or first moving
    if(lastX == 0) {
        lastX = currentX;
    }

    if(currentX < lastX) {
        // Left
    } else if(currentX > lastX){
        // Right
    }

    // Save last position
    lastX = currentX;

    // Check if moving is done
    lastT = setTimeout(function() {
        lastX = 0;
    }, 100);
});