0

ここに小さなサンプルアプリがあります: http://codepen.io/DouglasGlover/full/OPpMaV/

これはモバイル専用のエクスペリエンスです (ただし、技術的にはデスクトップでも機能します)。ここではモバイルのみを考慮します。

意図した動作は、ユーザーが自分の電話に触れて、電話 (画面上の任意の場所) で指を押したままにすることです。彼らがこれを行うと、カウンターが上がります。電話から指を離すと、カウンターが停止します。

ユーザーが (おそらく誤って) 携帯電話を回転させて、サイトの向きが切り替わるユース ケースがあります。現在、それが発生した場合、カウンターは無限に上向きにカウントし続けます。後続のタッチで 2 番目のタッチ イベントが開始され、処理が速くなります (最初の問題を修正することで対処できます)。

したがって、私の問題は、向きを切り替えると、タッチイベントが「死ぬ」ことです。したがって、「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

私はそれを達成するために過去2時間を費やしました。現在は不可能のようです - 現在の先行技術です。「orientationchange」は要素のフォーカスを失います。

于 2015-01-20T13:46:13.777 に答える
0

方向変更イベントをバインドして、終了と開始をトリガーできますか、それともユーザー エクスペリエンスを大幅に中断させますか。

何かのようなもの：

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