2012-04-02 4 views
1

글쎄, 힘든 일이 될 것입니다. 나는 모든 옵션을 다 써 버렸다고 생각합니다. 당신이 더 나은 것을 생각해 낼 수 있는지 봅시다.Apple Ipad Safari에서 이벤트를 제어하는 ​​경우

저는 가로형 회전식 컨베이어를 가지고 있으며이를 제어하기 위해 터치 시작, 터치 이동을 사용하고 있습니다. 이 예의 경우, HTML 구조가 같은 것이있다 :

<div> 
    <ul id="strip"> 
    <li><a>...</a></li> 
    <li><a>...</a></li> 
    ................... 
    </ul> 
</div> 

나는 단지 터치 생각하고, 이벤트를 터치 마우스에서 약간 다르게 행동하는 내 eventhandlers을 분리, 그래서 한, 나는이 :

var strip = document.getElementById('strip'); 
strip.addEventListener('touchstart', touchStartHandler); 
document.addEventListener('touchmove', touchMoveHandler); 
document.addEventListener('touchend', touchEndHandler); 

사용자가 내 스트립 바깥쪽에 손가락이 있어도 가로 스크롤을 원한다. 그래서 터치 이동과 touchend 이벤트를 문서에 첨부했다. ,

function touchMoveHandler(evt){ 
    evt.preventDefault(); 
    ................... 
} 

...이 방법 :

는 처음에, 나는 나의 touchMoveHandler 같은 것을보고, 사용자가 가만히 브라우저를 들어, 내 회전 목마를 스크롤하는 동안은, 자연 것이라고 생각 Y 축에서 사용자 손가락의 위치가 바뀌면 브라우저가 수직으로 이동하지 않습니다. 우리 유용성 녀석, 다르게 생각하고, 나는 실제로 그를 지금 동의합니다. 손가락의 움직임이 완벽하게 또는 거의 완벽하지 않으면 브라우저는 정상적으로 응답하기를 원합니다. 어쨌든, 이것은 아마도 너무 많은 정보 일 것이므로 지금 실제 문제를 자세히 설명하려고합니다. 이것은 내가 개념의 증거로 일하고 있어요 프로토 타입의 코드 조각입니다 :

var stopY, lastTime, newTime; 

var touchStartHandler(evt){ 
    ... 
    stopY = true; 
    lastTime = new Date(); 
    ... 
}; 
var touchMoveHandler(evt){ 
    ... 
    //this following code works like a setInterval, it turns stopY on and off every 1/2 sec 
    //for some reason, setInterval doesn't play well inside a touchmove event 
    newTime = new Date(); 
    if(newTime - lastTime >= 500){ 
     stopY = !stopY; 
     lastTime = newTime; 
    } 
    ... 
    if(stopY){ 
     evt.preventDefault(); 
    } 
    ... 
} 

내가, 내가 콘솔 로그와 디버깅이 코드는 자연 그대로의 절대적으로 확신하고 모든이를 제외하고 가정 무엇을하고있다 stopY 변수를 통해 브라우저 패닝을 통학하는 경우. stopY = true로 시작하는 코드를 실행하면 브라우저 패닝이 없습니다. stopY = false로 시작하면 예상대로 브라우저가 패닝합니다. 문제는이 동작이 0.5 초마다 바뀔 것으로 예상하고 그렇지 않다는 것입니다.

나는 너를 너무 많이 복잡하게 만들지 않았 으면 좋겠지 만, 이것은 정말로 구체적이다.

다음 링크를 시도 할 수 있습니다 (아이 패드 또는 아이폰) :
http://andrepadez.com/ipadtouch
http://andrepadez.com/ipadtouch?stopy=false

사용 소스보기 당신의 시간 및 당신의 도움

업데이트에 대한

감사합니다 , 전체 코드를 볼 수

+0

당신이 jsbin를하거나 바이올린 수

if(stopY){ return false; } else { return true; } 

단순성에 대한

단지 return !stopY; ... : 다음은 당신에게 당신이 찾고있는 동작을 제공 할 수 있습니다? – shaun5

+0

나는 시간이있을 때 –

+0

@ shaun5를 사용하여 게시판 링크를 사용해 볼 수 있습니다. 덕분에 –

답변

1

stopY = !stopY; 시도해 주시겠습니까? 당신이 preventDefault()을 실행하면

UPDATE

는, 스크롤 의지 touchend 화재까지 반환 할 수 또는 당신이 그것을 할 수 있습니다.

+0

미안 해요, 내가 복사/내 코드에서 붙여 넣기, 그리고 거기에 개체 범위에서 일하고있다 –

+0

@ AndréAlçadaPadez, 내 대답을 업데이 트했습니다. 아이 패드의 행동을 검사하기 위해 타이머를 2000으로 올리고 싶을지도 모른다. 희망적으로이 방법으로 문제가 해결됩니다! – shaun5

관련 문제