터치 장치에서 스 와이프 처리

마우스 및 스 와이프 이벤트 모두에서 작동하게하려는 가로형 회전식 구성 요소가 있습니다. 1 비트를 제외한 모든 기능이 정상적으로 작동합니다. 터치 장치에서 사용자가 세로로 스 와이프하여 전체 페이지를 스크롤하려고하면 캐 러셀을 가로로 스크롤하지 않습니다. 내가이 일을하고 무엇터치 장치에서 스 와이프 처리

에

mousedown/touchstart - 나는에, 첫 번째 이동 이벤트 페이지 스크롤, 아이템 선택 등을 방지하기 위해 전파에서 이벤트 ...
을 중지 회전 목마, 나는 사용자가 수직 또는 수평으로 움직이고 있는지 확인하기 위해 50ms 타임 아웃을 설정합니다. < deltaY에, 내 수평 스크롤을 중지위한 deltaX, mannually 플래그가 난 내 mousedown/touchstart 핸들러에 mannually
을 발사 나타내는과 함께 touchstart 이벤트가 발생하는 경우가 있다면
사실, 내 함수에서 true를 반환하므로 모든 기본 브라우저 이벤트 (예 : 페이지 세로 스크롤)가 계속 작동합니다.

이 작업이 작동하지 않습니다. 올바르게 작동하지만 브라우저가 페이지를 집어서 스크롤하지 않습니다. 나는 ... 너희들이 나를 도울 수 있도록이 내 회사에 대한 "비밀"프로젝트이기 때문에 ... 나는 온라인 예를 들어이없는 내가 충분히 제대로 자신을 설명하고

감사

출처

2012-03-26 André Alçada Padez

내가했다 희망 너와 똑같은 일을하려 했어? 열쇠는 현재 터치와 마지막 터치가 수평보다 수직 인 경우 touchmove을 확인하는 것입니다. 터치가 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽 인 경우 이벤트의 기본값을 금지하고 그렇지 않으면 무시하십시오. 내가 쓴 글은 다음과 같다. 잘하면 그것은 당신을 위해 일합니다!

var gestures = function() { 
    var self = this, 
    coords = { 
     startX: null, 
     startY: null, 
     endX: null, 
     endY: null 
    }; 

    self.$el.on('touchstart', function(e) { 
     coords.startX = e.originalEvent.targetTouches[0].clientX; 
     coords.startY = e.originalEvent.targetTouches[0].clientY; 
     coords.endX = coords.startX; 
     coords.endY = coords.startY; 
    }); 

    self.$el.on('touchmove', function(e) { 
     var newX = e.originalEvent.targetTouches[0].clientX, 
      newY = e.originalEvent.targetTouches[0].clientY, 
      absX = Math.abs(coords.endX - newX), 
      absY = Math.abs(coords.endY - newY); 

     // If we've moved more Y than X, we're scrolling vertically 
     if (absX < absY) { 
      return; 
     } 

     // Prevents the page from scrolling left/right 
     e.preventDefault(); 

     coords.endX = newX; 
     coords.endY = newY; 
    }); 

    self.$el.on('touchend', function(e) { 
     var swipe = {}, 
      deltaX = coords.startX - coords.endX, 
      deltaY = coords.startY - coords.endY, 
      absX = Math.abs(deltaX), 
      absY = Math.abs(deltaY); 

     swipe.distance = (absX > absY) ? absX : absY; 
     swipe.direction = (absX < absY) ? 
      (deltaY < 0 ? 'down' : 'up') : 
      (deltaX < 0 ? 'right' : 'left'); 

     // console.log(swipe.direction + ' ' + swipe.distance + 'px'); 

     // If we have a swipe of > 50px, let's use it! 
     if (swipe.distance > 50) { 
      if (swipe.direction === 'left') { 
       self.advance(); 
      } else if (swipe.direction === 'right') { 
       self.retreat(); 
      } 
     } 

    }); 
};

this 내 슬라이더 객체이며 $el 컨테이너 요소입니다.

출처

2012-07-21 18:38:15 Vestride

터치 장치에서 스 와이프 처리

답변

관련 문제