Как правильно обрабатывать клики на сенсорных устройствах?

Question

[thehighhomie]

При touchstart когда нажимаешь на кнопку то обработчик сразу срабатывает и открывается к примеру окно, как только прикоснешься, на клик не похоже. touchend я не уверен что это правильный вариант, по этому интересуюсь. Если просто на клик вешать, при использовании библитеки jquery вообще клики не обрабатываются. Как на практике для сенсоров обрабатывать клики?

Answer 1

[GreatRash]

Я не знаю насколько это правильно, но опишу как делаю я:

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 = Math.abs(touch.clientX - touchStart.x);
    var dy = Math.abs(touch.clientY - touchStart.y);
    
    // если дельта по x и по y меньше некоторого порогового значения,
    // значит у нас не свайп, а клик
    if (dx < treshold && dy < treshold) {
      console.log('this is click');
    }
  }
});

Answer 2

[Денис Инешин]

Touchstart или Touchend - вполне себе правильный вариант. При работе с мышкой, в 99% случаев, вешают события на click не потому, что нужно такое поведение (нажал, потом отпустил), а просто потому что так привычней. В то же время, часто используют mousedown и mouseup по отдельности, чтобы более четко контролировать момент события.

Comments

[thehighhomie]

ну а главный вопрос остается, как правильно повесить на кнопку событие для клика кнопки, например открытия окна какого-нибудь, а то при touchstart оно сразу открывается как только прикоснешься, не удобно листать, открываются если только прикоснешься

[Алексей A]

thehighhomie: а чем touchend не устраивает? Бывает, делают сразу два touchstart (например, для ajax запроса), а touchend для анимации кнопки, например. И получается, что запрос уже пошел, а потом анимация показала действие. Может положительно сказываться на UX.

Answer 3

[тостер хабрович]

для кнопок интерфейса удобнее и проще онклик
тачстарт для игр рисования и тд