Поддержка Javascript для касания без блокировки поддержки браузеров

Question

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

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

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

Вот код:

function addDragHandlers(eventDivId) { 
    var startX, endX; 
    var slides = $('#'+eventDivId); 

    slides.bind('touchstart', function(e) { 
     e.preventDefault(); 
     startX = e.pageX; 
     endX = startX; 
    }); 

    slides.bind('touchmove', function(e) { 
     e.preventDefault(); 
     endX = e.pageX; 
    }); 

    slides.bind('touchend', function(e) { 
      e.preventDefault(); 
      if (endX - startX < 0) { 
       // go to next image 
      } else if (endX - startX > 0) { 
       // go to previous image 
      } else { 
       // do click action 
      } 
     } 
    }); 
} 

Answer 1

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

event.stopPropagation(); 

, чтобы предотвратить «preventDefault()» от распространяющихся в

Answer 2

Я хотел, чтобы работать на Android, так что я не хочу, чтобы использовать события жестов, которые Я читал только на iOS - хотя у меня нет андроида, чтобы проверить это требование.

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

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

Это все еще не идеально. Если вы начнете с прикосновения к элементу галереи, а затем прикоснитесь к нему, пинч не будет работать.

В отличие от библиотеки jQuery «TouchSwipe» есть невероятно хорошо продуманный и гибкий API, но с той конфигурацией, в которой я нуждался, отслеживанием только горизонтальных прокруток на моем элементе, это было слишком изворотливо под iOS6 и не было обновляется в течение нескольких недель. Если вы смотрите на этот вызов, и через несколько месяцев я рекомендую проверять обновления для этого плагина.