Размах событий в мобильном сафари периодически прерывается - PullRequest
Новая
       14

Размах событий в мобильном сафари периодически прерывается

0 голосов
/ 19 июня 2010

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

Для анимации у меня есть контейнер предыдущей и следующей страницы, в котором хранится контент. Я удалил функцию AJAX, где я заполняю их для простоты.

Это работает при движении вперед, но при движении назад, я, похоже, теряю поведение предотвратительного дефолта, и вся страница перемещается одним движением пальца. Эта проблема возникает только периодически и исчезает при движении назад. 

    // Slightly modified code by Dave Dunkin
    // http://rabblerule.blogspot.com/2009/08/detecting-swipe-in-webkit.html

    function addSwipeListener(el, listener)
    {
     var startX;
     var dx;
     var direction;

     function cancelTouch()
     {
      el.removeEventListener('touchmove', onTouchMove);
      el.removeEventListener('touchend', onTouchEnd);
      startX = null;
      startY = null;
      direction = null;
     }

     function onTouchMove(e)
     {
      if (e.touches.length > 1)
      {
       cancelTouch();
      }
      else
      {
       dx = e.touches[0].pageX - startX;
       var dy = e.touches[0].pageY - startY;
       if (direction == null)
       {
        direction = dx;
       }
       else if ((direction < 0 && dx > 0) || (direction > 0 && dx < 0) || Math.abs(dy) > 400)
       {
        cancelTouch();
       }
      }
     }

     function onTouchEnd(e)
     {
       cancelTouch();
      if (Math.abs(dx) > 30)
      {
        listener({ target: el, direction: dx > 0 ? 'right' : 'left' });
        dx = 0;
      }
     }

     function onTouchStart(e)
     {
        e.preventDefault();
        e.stopPropagation();
      if (e.touches.length == 1)
      {
       startX = e.touches[0].pageX;
       startY = e.touches[0].pageY;
       el.addEventListener('touchmove', onTouchMove, false);
       el.addEventListener('touchend', onTouchEnd, false);
      }
     }

     el.addEventListener('touchstart', onTouchStart, false);
    }

Добавить Swipe Listener 

     addSwipeListener(document.getElementById("contentwrapper"), function(e) {
          swipePageChange(e);
      });

       function swipePageChange(e) {
           if(e.direction == "left") {
               moveforward();
           }
           if(e.direction == "right") {
              movebackward();
           }
       }

События перемещения страницы 

    function moveforward() {
            $("#previouspagecontainer").css("z-index","20");
            $("#newpagecontainer").css("z-index","40");

            $("#previouspage").html($("#circular").html())
            $("#newpagecontainer")[0].style.webkitAnimationName = 'flippageright';
            $("#newpagecontainer")[0].addEventListener('webkitAnimationEnd', function() {
                $("#currentpagecontainer").css("z-index","30");
                $("#newpagecontainer")[0].style.webkitAnimationName = '';
                $("#circular").html($("#nextpage").html());
            });
            return false;
        }

        function movebackward() {
                $("#previouspagecontainer").css("z-index","40");
                $("#currentpagecontainer").css("z-index","30");
                $("#newpagecontainer").css("z-index","20");
                $("#previouspagecontainer")[0].style.webkitAnimationName = 'flippageleft';
                $("#previouspagecontainer")[0].addEventListener('webkitAnimationEnd', function() {
                    $("#previouspagecontainer")[0].style.webkitAnimationName = '';
                    $("#circular").html($("#previouspage").html());
                });
             return false;
        }

1 Ответ

0 голосов
/ 02 июля 2010

Проблема была вызвана удалением несвязанного элемента из DOM.Я не совсем уверен, почему это привело к прерыванию событий свайпа, но остановка этой практики устранила мою проблему.

...