На мобильном телефоне, как я могу сохранить ориентацию от взлома JQuery touchstart/touchhend?

Question

У меня есть небольшое приложение для примера здесь: http://codepen.io/DouglasGlover/full/OPpMaV/

Это мобильный опыт (хотя он технически функционирует и на рабочем столе). Меня беспокоит только мобильная связь.

Предполагаемое поведение заключается в том, что пользователь касается своего телефона и удерживает палец на телефоне (в любом месте экрана). Когда они это делают, счетчик поднимается. Когда они позволяют пальцу оторваться от телефона, он останавливает счетчик.

Существует случай, когда пользователь может (возможно, случайно) повернуть свой телефон настолько, чтобы ориентация сайта переключалась. В настоящее время, если это происходит, счетчик продолжает считать бесконечно вверх. Последующие касания инициируют второе событие касания, которое ускоряет его (я могу справиться с этим, исправление исходной проблемы должно исправить это).

Так что моя проблема заключается в том, что при переключении ориентации сенсорное событие «умирает». Поэтому «touchstart» срабатывает изначально, и я жду «touchhend», который никогда не загорается.

В идеале пользователь может коснуться телефона, а затем повернуть его без последствий (и не нарушая опыт).

Вот код прототипа, как она стоит сейчас ...

HTML:

<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:

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

Можете ли вы связать событие changechange, чтобы вызвать конец и начало, или это вызовет чрезмерный перерыв в работе пользователя.

что-то вроде:

$(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 часа, пытаясь его достичь. Кажется, что он сейчас неспособен - текущий предшествующий уровень искусства. «changechange» теряет фокус элемента.