Стоит ли реализовать свайпы

[alleclf]

Скажите пожалуйста, стоит ли на сайте реализовать поддержку свайпов для сенсорных экранов?

Основное назначение - перелистывание, увеличение/уменьшение фотографий и скринов на странице. Нашел два варианта - Hammer.JS и Zepto.js

[Great Rash]

Нафига вам сторонние скрипты если это всё пишется элементарно:

var treshold = 10; // пороговое значение (если расстояние тача больше него, значит у нас свайп, а не клик)
var touchStart = { // тут храним начальные координаты тача
  x: 0,
  y: 0
};

$(elem).on({
  'touchstart': function(e) {
    var touch = e.originalEvent.changedTouches[0];
    
    // запоминаем начальные координаты тача
    touchStart.x = touch.clientX;
    touchStart.y = touch.clientY;
  },

  'touchend': function(e) {
    var touch = e.originalEvent.changedTouches[0];
    
    var dx = touch.clientX - touchStart.x;
    var dy = touch.clientY - touchStart.y;
    
    var abs_dx = Math.abs(dx);
    var abs_dy = Math.abs(dy);
    
    // если дельта по x и по y меньше порогового значения,
    // значит у нас не свайп, а клик
    if (abs_dx < treshold && abs_dy < treshold) {
      console.log('this is click');
    }
    
    // если дельта по x больше порогового значения и она больше дельты по y
    // значит мы свайпим влево или вправо, но не вверх или вниз
    if (abs_dx > treshold && abs_dx > abs_dy) {
      if (dx < 0) { // если дельта меньше нуля, значит свайпнули влево
        $(this).trigger('swipeLeft', e);
      } else {
        $(this).trigger('swipeRight', e);
      }
    }
    
    // если дельта по y больше порогового значения и она больше дельты по x
    // значит мы свайпим вверх или вниз, но не влево или вправо
    if (abs_dy > treshold && abs_dy > abs_dx) {
      if (dy < 0) {
        $(this).trigger('swipeUp', e);
      } else {
        $(this).trigger('swipeDown', e);
      }
    }
  },
  
  'swipeLeft': function(e) {
    console.log('this is swipe left');
  },
  
  'swipeRight': function(e) {
    console.log('this is swipe right');
  },
  
  'swipeUp': function(e) {
    console.log('this is swipe up');
  },
  
  'swipeDown': function(e) {
    console.log('this is swipe down');
  }
});