Question

我在这里有一个小样本应用：http://codepen.io/DouglasGlover/full/OPpMaV/

这是一种仅限移动设备的体验（虽然它在技术上也可以在桌面上运行）。这里只关心移动。

预期的行为是用户触摸他们的手机，并将手指放在手机上（屏幕上的任何位置）。当他们这样做时，柜台就会上升。当他们的手指脱离手机时，它会停止计数器。

有一个用例，用户可能（可能是意外地）将手机旋转到足以使网站的方向切换。目前，如果发生这种情况，计数器继续无限向上计数。后续触摸启动第二次触摸事件，这使得它更快（我可以解决这个问题，修复初始问题应该解决这个问题）。

所以我的问题似乎是在切换方向时，触摸事件“死亡”。因此，“touchstart”最初会触发，我正在等待一个永远不会被触发的“触碰”。

理想情况下，用户可以触摸手机，然后旋转它而不会产生任何后果（并且不会破坏体验）。

这是现在的原型代码......

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

你可以绑定orientationchange事件来触发结束和开始，或者会导致用户体验中断太多。

类似的东西：

$(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”失去了元素的焦点。

在移动设备上，如何保持方向更改不会破坏Jquery touchstart / touchend？

3 个答案: