1

Highchartsを使用して、Javascript で可動ポイントを含む折れ線グラフを実装しようとしています。最新の Chrome を使用すると、すべてが期待どおりに機能します。しかしiPhoneやiPadで見ると可動箇所が全く動かない。

これは、モバイル Safari ではマウス イベントの処理が異なるためです。

mousedownになるtouchstart、mousemoveなるtouchmove、など

すべての touchevent を対応する適切なモバイル イベントにマップしようとしましたが、あまり成功しませんでした。ポイントはドラッグできますが、ビューが更新されません...

Chrome の動作バージョン: http://jsfiddle.net/MTyzv/3/

モバイル Safari バージョン: http://jsfiddle.net/MTyzv/7/

アップデート

OK、問題を少し絞り込みました...すべてのタッチ イベントが正しく処理されているように見えますが、ポイントが移動するとすぐに 0.0 にジャンプします。それに加えて、グラフは最初のタッチ後に「再描画」されません。このフィドルの更新版を参照してくださいhttp://jsfiddle.net/MTyzv/11/

4

2 に答える 2

3

これは、タッチ イベントを使い始めるすべての人にとってよくある問題です。

TouchEvent はマルチタッチに対応しているので、 のようなものはありませんevent.pageX。TouchEvent には、次の 3 つの「TouchLists」が含まれています。

  • イベント.タッチ
  • event.targetToches
  • event.changedTouches

最後に、これらのリストで Touch pageX、pageY などを取得できます。マルチタッチを気にしない場合は、一般的な単純化があります。event.targetTouches[0].pageX を呼び出すことができます。

ここでデモを更新しました: http://jsfiddle.net/7UsbM/7/現在、タッチ対応デバイスとデスクトップ ブラウザーの両方で動作します。

MDN リファレンスを確認することを忘れないでください: https://developer.mozilla.org/en/DOM/Touch_events

それが役に立てば幸い。

于 2012-05-27T10:36:41.743 に答える
1

モバイル用のドラッグのようなものはありませんが、これを機能させるにはタッチ イベントを使用する必要があります。通常、ロジックを作成するにはx、y座標が必要なので、イベントを追加してx、yを取得するか、x、yをクリックしてこれらの関数を呼び出すだけでなく、マウス/タッチのx、y位置で機能する関数/クラスを作成します。

$('div').bind('mousedown' , function(e)
{
   // get x,y code
   var y = e.pageY;
   var x = e.pageX;

   // pass to function down(x,y);
   down(x,y);
});


$('div').bind('touchstart' , function(e)
{
   // get x,y code
   var touch = e.touches[0];
   var y = touch.pageY;
   var x = touch.pageX;

   // pass to function down(x,y);
   down(x,y);
});

function down(x,y)
{
   // do something with x,y
}
于 2012-05-27T10:38:45.610 に答える