12

iosデバイス（そしておそらく後でandroid）からアクセスするときに、JavaScriptアプリケーションにいくつかのマルチタッチ機能を追加したいと思います。

シフトキーのような機能を提供したいと思います。ユーザーは1本の指で画面上のボタンを押し続けることができ、このボタンが押されている間、画面の残りの部分でのタップアクションの動作は従来のタップとは少し異なります。

私が遭遇している問題は、シフトキーボタンを押している人差し指に対してタッチムーブが起動されない限り、タッピング指のタッチエンドイベントを受け取らないことです。

画面は非常に敏感であるため、touchmoveイベントは簡単に発生し、ほとんどの場合、すべてが正常に機能します。

ただし、ユーザーの指が少し静止している場合は、ユーザーが指を少し動かすまでタッピングは検出されません。これにより、タッピングと画面上で発生するアクションの間に可変の「遅延」が発生します（遅延は変動する可能性があり、ユーザーが非常に落ち着いている場合は数秒続く場合があります）。私の推測では、この遅延により、ユーザーはもう一度タップして、アクションを2回実行することになります。これは、私が望まないことです。

あなたはここであなたのipad/iphoneでそれをテストすることができます：http：//jsfiddle.net/jdeXH/8/

赤のdivをタップしながら、シアンのdivを指で動かさないようにして、体を数秒間緑色のままにしてください。

この動作は予想されるものですか？この問題の既知の回避策はありますか？指を画面から離すとすぐにタッチエンドイベントが発生することを期待していました。

私はこれをiOS5.1.1（ipad1とiphone4s）でテストしました

編集：SafariMobileで必要なマルチタッチtouchEventsがトリガーされない同様の質問を見つけました

4

4 に答える 4

3

まあ、バグは私よりも何人かの人々を悩ませているようで、彼らはバグをAppleに直接提出し、数年後にiOS6で修正されました:)

于 2012-10-23T15:48:14.987 に答える
1

さて、これは頭痛です。はい、2 つの既知の問題があります。まず第一に、touchMove が実際にはあまり機能しない場合でも、どこかに touchMove がない限り、Safari はわざわざ touchEnd イベントを発生させないことがあります。

第二に、多くの Android デバイスでは、何をしても touchEnd イベントがまったく発生しないため、Chrome モバイルも素晴らしいエクスペリエンスです。だから私の経験から：

  • 開始座標などを登録する touchStart イベントを実装する
  • touchEnd とまったく同じことを行う touchMove イベントを実装しますが、コールバックが複数回発生しないようにしてください。より高いスコープで定義されたブール値フラグなどを使用します。
  • より高いスコープで定義された同じブール値フラグを使用して、touchMove がまだコールバックを起動していない場合にのみ起動する通常の touchEnd イベントを実装します。
于 2012-10-20T20:25:06.077 に答える
0

したがって、回避できず、バグのあるハックしかないシナリオの1つに到達したようです。あなたはまだ「標準」ではないUI機能を作成していますが、ある程度の見込みがあるようです（私は好きです...私は好きです）。テクノロジーのこの時点で自問する質問は、「シフトを保持するために、ユーザーに指をスライドさせるにはどうすればよいか」です。

優れたデザイナーの助けを借りて、フリップスイッチに似たスライド式のトグルボタンを作成できると思います...ユーザーがスイッチを「オン」にするには、ドラッグアンドホールドする必要があります。リリースすると、スイッチは「オフ」の位置に戻ります。ボタンが動作するように見える必要があるため、デザイナーについて説明します。たぶん、コメントのいくつかは創造的になることができます。

于 2012-10-17T02:30:12.897 に答える
0

わかりました、私はこのソリューションを実装しました、そしてそれはうまくいくようです。

//Initialize the tap touch
function ManageTapTouch() {
    this.__enabled__ = false;
}

ManageTapTouch.prototype.init = function(){
    $("#hold").bind('touchstart', $.proxy(this.__enable__, this));
    $('#hold').bind('touchend', $.proxy(this.__disable__, this));
    $('#tap').bind('touchstart',  $.proxy(this.__changeColorOnHold__, this));
    $('#tap').bind('touchend',  $.proxy(this.__changeColorOnOut__, this));
};
ManageTapTouch.prototype.__enable__ = function(event) {
    this.__enabled__ = true;
};
ManageTapTouch.prototype.__disable__ = function(event) {
    this.__enabled__ = false;
    $('body').css('background-color', 'blue'); 
};
ManageTapTouch.prototype.__changeColorOnHold__ = function(event) {
    if (this.__enabled__){
        $('body').css('background-color', 'black');
    }
};
ManageTapTouch.prototype.__changeColorOnOut__ = function(event) {
    $('body').css('background-color', 'blue');
};

new ManageTapTouch().init();

あなたはそれがここで実行されているのを見ることができます：http：//jsfiddle.net/Tb6t6/15/

また、マルチタッチを使用してiPhoneで別の方法を試すこともできます。event.originalEvent.touches[0].pageXインデックスevent.originalEvent.touches[0].pageYは画面上の指であり、イベントはで発生したイベントTouchStartです。このトピックを使用すると、このアクションの独自のバージョンを実装することも、ここで提案するものを使用することもできます。

于 2012-09-13T19:37:45.933 に答える