0

我在这里有一个小示例应用程序：http: //codepen.io/DouglasGlover/full/OPpMaV/

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

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

有一个用例，用户可能（可能不小心）旋转他们的手机，刚好足以改变网站的方向。目前，如果发生这种情况，计数器将继续无限向上计数。随后的触摸会启动第二个触摸事件，这使它更快（我可以处理这个问题，修复初始问题应该可以解决这个问题）。

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

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

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

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);
});
4

3 回答 3

0

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

就像是：

$(window).on('orientationchange', function () {
   $('.touchspace').trigger('touchend');
   $('.touchspace').trigger('touchstart');
});
于 2015-01-13T18:26:12.877 回答
0

在区间内，检查初始方向是否改变并清除区间。由于我没有环境，无法测试代码！

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
});
于 2015-01-20T11:12:34.617 回答
0

我花了最后 2 个小时试图实现它。似乎它现在无法 - 当前的现有技术。“orientationchange”失去了元素的焦点。

于 2015-01-20T13:46:13.777 回答