Как различить увеличение или уменьшение при помощи сенсорной панели и колесика мыши

Question

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

Answer 1

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

1) touchstart 2) touchmove 3) touchend 4) mouseover 5) mousemove 6) mousedown 7) mouseup 8) click

Это, конечно,, означает, что если вы обрабатываете сенсорные события, такие как touchstart, вам необходимо убедиться, что вы не обрабатываете соответствующее событие mousedown и / или click.Если вы можете отменить события прикосновения (вызывать warnDefault () внутри обработчика событий), то никакие события мыши не будут сгенерированы для прикосновения.

Обновление: Вы можете идентифицировать прикосновение или щелчок следующим образом: `

$('#element-id').on('click touchend',function(e){
  if(e.type=='click')
      console.log('Mouse Click');
  else
      console.log('Touch');
});

`