IPad события касания, но все же позволяют для щепотку зума

Question

Я работаю на странице, которая содержит слайдеры jquery. Я хочу включить эти слайдеры для посетителей сайта iPad. Я получил это работает со следующим кодом:

 function touchHandler(event) 
     { 
      var touches = event.changedTouches, 
       first = touches[0], 
       type = ""; 
       switch(event.type) 
      { 
       case "touchstart": type = "mousedown"; break; 
       case "touchmove": type="mousemove"; break;   
       case "touchend": type="mouseup"; break; 
       default: return; 
      } 

      //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
      //   screenX, screenY, clientX, clientY, ctrlKey, 
      //   altKey, shiftKey, metaKey, button, relatedTarget); 

      var simulatedEvent = document.createEvent("MouseEvent"); 
      simulatedEvent.initMouseEvent(type, true, true, window, 1, 
             first.screenX, first.screenY, 
             first.clientX, first.clientY, false, 
             false, false, false, 0/*left*/, null); 

             first.target.dispatchEvent(simulatedEvent); 
      event.preventDefault(); 
     } 

     function init() 
     { 
      document.addEventListener("touchstart", touchHandler, true); 
      document.addEventListener("touchmove", touchHandler, true); 
      document.addEventListener("touchend", touchHandler, true); 
      document.addEventListener("touchcancel", touchHandler, true);  
     } 

     if ((navigator.userAgent.match(/iPad/i))) { 
      init(); 
     } 

Это прекрасно работает, кроме я уже не в состоянии зажать увеличивать и уменьшать масштаб страницы на IPad. Есть ли способ сохранить функции щепотки/масштабирования, а затем правильно ли работать с сенсорными событиями на ползунке jquery?

Вот тестовая страница в действии: http://www.tonyjacobson.com/napawapa/slider-test4

Answer 1

Проблема здесь лежит event.preventDefault(), который отменяет нормальную интерпретацию и обработку жеста и облегчает пользовательское взаимодействие. Чтобы сохранить функцию «щепотка-масштабирование» по умолчанию вместе с вашим настраиваемым событием, вам необходимо обернуть свой пользовательский обработчик в состояние, которое оценивает событие по определенным критериям, которые предполагают, что пользователь пытается использовать ваше пользовательское взаимодействие, в отличие от Apple по умолчанию. Я бы хотел, чтобы changedTouches был бы довольно неплохим индикатором, поскольку функция «щепотка для увеличения» является событием с несколькими касаниями, что означает, что длина changedTouches больше 1. Таким образом, вы можете только инициировать собственное пользовательское событие (тем самым предотвращая поведение по умолчанию), если changedTouches.length == 1.

Answer 2

Вот что я должен сделать это все работы:

function touchHandler(event) 
     { 
      if (String(event.target).indexOf("#") != -1) { // THIS IS A UNIQUE ATTRIBUTE OF THE JQUERY SLIDER BUTTON. I CHECK TO SEE IF THE TARGET INCLUDES THAT '#' SIGN AND THEN IF IT DOES I GENERATE THE SIMULATED EVENT. OTHERWISE LET THE NOMRAL PAGE BEHAVIOR CONTINUE. 
       var touches = event.changedTouches, 
           first = touches[0], 
           type = ""; 
       switch(event.type) { 
        case "touchstart": 
         type = "mousedown"; 
         break; 
        case "touchmove": 
         type="mousemove"; 
         break; 
        case "touchend": 
         type="mouseup"; 
         break; 
        default: return; 
       } 

       //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
       //   screenX, screenY, clientX, clientY, ctrlKey, 
       //   altKey, shiftKey, metaKey, button, relatedTarget); 

       var simulatedEvent = document.createEvent("MouseEvent"); 
       simulatedEvent.initMouseEvent(type, true, true, window, 1, 
              first.screenX, first.screenY, 
              first.clientX, first.clientY, false, 
              false, false, false, 0/*left*/, null); 

              first.target.dispatchEvent(simulatedEvent); 

       event.preventDefault(); 
      } 
     } 

     function init() 
     { 
      document.addEventListener("touchstart", touchHandler, true); 
      document.addEventListener("touchmove", touchHandler, true); 
      document.addEventListener("touchend", touchHandler, true); 
      document.addEventListener("touchcancel", touchHandler, true); 
     } 


     init();