Jackmoore Увеличение 1.7.15: Переключение увеличения на сенсорном устройстве с двойным отводом

Question

Использование Увеличение по Jackmoore: http://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

Я хотел бы использовать двойное нажатие на сенсорных устройствах для переключения эффекта масштаба. Причина в том, что карусель, который я использую (OWL Carousel), для изображений также имеет функцию прокрутки, а Zoom работает на сенсорном устройстве, касаясь и перетаскивая изображение, это конфликтует с салфеткой.

Понравился сайт Topman делает для мобильных устройств: http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835?bi=0&ps=20

Это ссылка на файл JS: https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

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

if (settings.on === 'toggle') { 
       $source.on('dblclick.zoom', 
        function (e) { 
         if (clicked) { 
          stop(); 
         } else { 
          start(e); 
         } 
         clicked = !clicked; 
        } 
       ); 

Но нужно адаптировать код для сенсорных настроек, я считаю изменения в этой части:

// Touch fallback 
      if (settings.touch) { 
       $source 
        .on('touchstart.zoom', function (e) { 
         e.preventDefault(); 
         if (touched) { 
          touched = false; 
          stop(); 
         } else { 
          touched = true; 
          start(e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]); 
         } 
        }) 
        .on('touchmove.zoom', function (e) { 
         e.preventDefault(); 
         zoom.move(e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]); 
        }) 
        .on('touchend.zoom', function (e) { 
         e.preventDefault(); 
         if (touched) { 
          touched = false; 
          stop(); 
         } 
        }); 
      } 

Возможно, добавление двухканального прослушивателя с чем-то вроде Touchy: https://github.com/yairEO/touchy может сделать трюк. Мне удалось заставить его распознать двойной щелчок сейчас, но не запускать функцию масштабирования.

Answer 1

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

На сенсорном конце вам нужно и сохранить временную метку и понять, сколько времени прошло, и если вы хотите рассмотреть это как двойной кран.

var stateVar = new Date().getTime(); 
function fnRef(e){ 
    if(new Date().getTime() - stateVar < 300){ 
     e.preventDefault(); 
     // invoke logic here 
    } 
} 

element.addEventListener("touchend", fnRef); 

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

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