모바일에서 Jquery touchstart/touchend가 깨지는 방향 변경을 유지하려면 어떻게해야합니까?

Question

여기에 작은 샘플 앱이 있습니다. http://codepen.io/DouglasGlover/full/OPpMaV/

기술적으로는 데스크톱에서도 작동하지만 모바일 전용 환경입니다. 여기 모바일에 대해서만 관심이 있습니다.

의도 한 동작은 사용자가 전화기에 손을 대고 전화기의 손가락을 화면의 아무 곳에 나 두는 것입니다. 카운터가 올라갈 때 카운터가 올라갑니다. 손가락을 전화기에서 내리면 카운터가 멈 춥니 다.

사용자가 실수로 전화기를 돌려서 사이트의 방향을 전환 할 수있는 유스 케이스가 있습니다. 현재 그러한 일이 발생하면 카운터는 계속해서 무한히 위쪽으로 계산됩니다. 후속 터치는 두 번째 터치 이벤트를 시작하므로 빠르게 진행됩니다 (초기 문제를 해결하면이를 해결해야 함).

내 문제는 오리엔테이션 전환시 터치 이벤트가 "죽습니다"인 것 같습니다. 따라서 "터치 스타트"는 처음에는 발사되며 결코 발사되지 않는 "touchend"를 기다리고 있습니다.

이상적으로 사용자는 휴대 전화를 만져서 아무런 결과없이 (그리고 경험을 깨지 않고) 회전 할 수 있습니다.

<div class="touchspace"></div> 
<div class="ls"> 
    <div class="counter">0</div> 
</div> 
<div class="pt"> 
    <div class="counter">0</div> 
</div> 

CSS :

body{ margin: 0; } 
.ls, .pt{ display: block; width: 100vw; height: 100vh; } 
.ls{ background: lightblue; } 
.pt{ background: lightgreen; } 
.counter{ display: block; position: relative; top: 10%; font-weight: bold; color: white; font-size: 20vw; width: 20%; margin: 0 auto; } 
.touchspace{ display: block; position: absolute; bottom: 0; right: 0; background: transparent; z-index: 999; background: red; width: 500vw; height: 500vh; opacity: .5; } 

@media all and (orientation:landscape){ .ls{ display: none; } } 
@media all and (orientation:portrait){ .pt{ display: none; } } 

JS :

지금의 약자로 여기

은 ...

HTML 프로토 타입 코드의

var counter = 0, interval; $(".touchspace").bind("touchstart mousedown",function(){ interval = window.setInterval(function(){ counter++; $(".counter").html(counter); }, 1000); }); $(".touchspace").bind("touchend mouseup",function(){ window.clearInterval(interval); }); 

Answer 1

오리엔테이션 변경 이벤트를 바인딩하여 종료와 시작을 ​​트리거 할 수 있습니까? 그렇지 않으면 사용자 환경이 너무 많이 중단됩니다. 같은

뭔가 : 간격 내부

$(window).on('orientationchange', function() { 
    $('.touchspace').trigger('touchend'); 
    $('.touchspace').trigger('touchstart'); 
}); 

Answer 2

는 초기 방향이 변경되는 경우 확인하고 간격을 취소합니다. 환경이 없으므로 코드를 테스트 할 수 없습니다!

var counter = 0, 
isOrientationChanged=false, 
interval; 
$(".touchspace").bind("touchstart mousedown",function(){ 
    interval = window.setInterval(function(){ 
    counter++; 
    $(".counter").html(counter); 
    //check if orientation is changed, clear the interval & reset the flag 
    if(isOrientationChanged) 
    { 
     isOrientationChanged=false; 
     window.clearInterval(interval); 
    } 
    }, 1000); 
}); 

$(".touchspace").bind("touchend mouseup",function(){ 
    window.clearInterval(interval); 
}); 

$(window).on('orientationchange', function() { 
    isOrientationChanged=true;//mark the flag true 
}); 

Answer 3

나는 그것을 달성하기 위해 지난 2 시간을 보냈다. 그것은 당장 불가능합니다 - 현재 예술의 선행 인 것 같습니다. "orientationchange"는 요소의 포커스를 잃습니다.