Question

我正在尝试为我正在处理的网站设置滑动事件。基本上，当有人刷内容容器时，其中的子div元素将根据页面上的内容改变内容。我附加滑动侦听器的实际div“contentwrapper”不会改变。

要做一些动画，我有一个存储内容的上一页和下一页容器。我删除了ajax函数，为了简单起见，我填充了这些函数。

这在前进时有效，但在向后时，我似乎失去了preventDefault行为，整个页面用我的手指滑动移动。这个问题只是间歇性地发生，并且在倒退时会消失。

    // 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);
    }

添加滑动侦听器

     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;
        }

Answer 1

问题是由从DOM中删除不相关的元素引起的。我不太确定为什么这会导致打滑事件，但是停止这种做法会解决我的问题。

移动Safari中的滑动事件间歇性地中断

1 个答案: