問題タブ [touchstart]

私は、さまざまなデバイスで動作する必要があるモバイル Web サイトに取り組んでいます。今頭を悩ませているのは BlackBerry です。

キーボード クリックとタッチ イベントの両方をサポートする必要があります。

理想的には、次を使用します。

しかし、私たちが直面している問題は、これらの Blackberry デバイスの一部では、タッチしてからクリックがトリガーされるまでに非常に厄介な遅延があることです。

解決策は、代わりに touchstart を使用することです。

しかし、両方のイベントをバインドし、一方のみを起動するにはどうすればよいでしょうか? キーボード デバイスのクリック イベントは引き続き必要ですが、もちろん、タッチ デバイスを使用している場合はクリック イベントを発生させたくありません。

おまけの質問: とにかくこれを行う方法はありますか?また、タッチスタート イベントさえも持たないブラウザに対応する方法はありますか? これを調査すると、BlackBerry OS5 は touchstart をサポートしていないように見えるため、そのブラウザのクリック イベントにも依存する必要があります。

補遺:

おそらく、より包括的な質問は次のとおりです。

jQueryでは、同じバインディングでタッチ操作とマウス操作の両方を処理することが可能/推奨されていますか?

理想的には、答えはイエスです。そうでない場合は、いくつかのオプションがあります。

1. WURFL を使用してデバイス情報を取得し、独自のデバイス マトリックスを作成します。デバイスに応じて、タッチスタートまたはクリックを使用します。

2. JS を介してブラウザーでのタッチ サポートを検出します (これについてはさらに調査する必要がありますが、それは実行可能のようです)。

ただし、それでもまだ 1 つの問題が残っています。両方をサポートするデバイスについてはどうでしょうか。サポートしている一部の携帯電話 (Nokias と BlackBerry など) には、タッチ スクリーンとキーボードの両方が備わっています。そういうわけで、元の質問に完全に戻ります...どうにかして両方を同時に許可する方法はありますか?

jQuery 1.6.4、iOS 5、およびタッチスタート/タッチエンドイベントの登録に問題があります（タイトルに記載されているように）。

次のコードを取ります。

「pureJS」ボタンはiOS4.3およびiOS5でアラートを表示しますが、「jQuery」ボタンはiOS4.3でのみ機能します。iPad / iPhoneシミュレーター、4.3および5でテスト済み。実際のiPhone4.3、iPhone 5.0、およびiPad5.0でもテストされています。の代わりに、<input type="button">または単純なものを使用した場合も同じ反応です。<a><button>

私が信じているように、それはjQueryに関連する問題ですか？

JavaScript と jQuery を使用してタッチ イベントをキャプチャしようとしています。しかし、Android 2.3.2 の Web ブラウザーで非常に奇妙な動作が見られます。

• 画面全体にオレンジ色の枠線とハイライトが一時的に表示されます。
• 間違ったイベントを送ります。

オレンジ色の境界線は、同じ根本的な問題に関連する症状のように見えるので、あまり心配していません。実際には、ブラウザーが問題を起こしていることを知ることができるので便利です。私が本当に知りたいのは、2回のクイックタップに対して適切なタッチイベントを一貫して取得するにはどうすればよいですか? その問題が解決すると、オレンジ色の枠もなくなると思います。

以下は、私がこれまでに解決したすべての苦痛な詳細です。

これは、問題を示し、受信した各イベントの詳細とタイミングに関する多くの診断情報を表示するページです。青い四角形の内側をタップし、次に黒い四角形の内側をすばやくタップすると、オレンジ色のフラッシュ/悪いイベントが発生します。

私の jQuery コードはかなり標準的です。log関数の実装は重要ではありません。問題は、ブラウザが呼び出す必要があるときに呼び出さないことです。

最初に説明した現象の詳細:

オレンジ色の境界線と強調表示:これは、ブラウザーがハイパーリンクをクリックしたときにその周囲に描画するのと同じオレンジ色の境界線と強調表示です。しかし、ページにはハイパーリンクがなく、ブラウザーはこのオレンジ色の境界線を画面全体に描画します。具体的には、<div id="battle">jQuery 経由でイベントをフックしている外側の周囲に描画します。

間違ったイベント:イベントtouchstartハンドラーで を呼び出しevent.preventDefault()て、ブラウザーにスクロールしないように指示したり、マウス イベントを合成しないように指示したりしていtouchstartますtouchend。そして、私は最初のタップのためにそうします。touchstartしかし、 /の代わりにtouchend、2 回目のタップでは、タッチ イベント、合成されたマウス イベント、およびtouchcancel2 回目のタップの不定期、または最初のタップの繰り返しイベントのすべての組み合わせを取得します。詳細は以下。

この動作も非常に特殊な状況でのみ発生します。

• 最初のタップは短くする必要があります (~200ms 未満)。
• その後、2 回目のタップはすぐに行う必要があります (最初のタップから 450 ミリ秒以内touchstart)。
• 2 番目のタップは、最初のタップから少なくとも 150 ピクセル離れている必要があります (最初のタップの座標から対角線に沿って測定touchstart)。
• と をフックするコードを削除するmousedownとmouseup、オレンジ色の四角形は表示されなくなります。ただし、タッチ イベントはまだ文字化けすることがあります。

イベントが文字化けしているという意味で、私が見ているのは次のとおりです。「1:」と書くと、それはイベントが最初のタップの座標に対するものであることを意味します。「2:」は 2 番目のタップの座標を意味します。次のパターンのイベントが見られました (パーセンテージは、100 回の試行後に各イベントが発生した回数を示します)。

• (50%) 1:touchstart 1:touchend 1:mousedown 1:mouseup (短い遅延) 2:mousedown 2:mouseup
• (35%) 1:タッチスタート 1:タッチエンド 2:タッチスタート 1:マウスダウン 1:マウスアップ 2:タッチエンド
• (10%) 1:touchstart 1:touchend 2:touchstart 1:mousedown 1:mouseup 2:touchcancel (短い遅延) 2:mousedown 2:mouseup
• (3%) 1:touchstart 1:touchend 2:touchstart 2:touchend (短い遅延) 1:mousedown 1:mouseup
• (2%) 1:touchstart 1:touchend 1:mousedown 1:mouseup (2回目のタップは何もしない)

タップする速さに応じて、いくつかのイベントの組み合わせがより頻繁に発生するように見えますが、パターンを完全に突き止めていません. (2 回のすばやく鮮明なタップは、上記の 2 番目の項目に分類される可能性が高いようですが、鮮明さをあまり重視しない、より迅速な発射アプローチは、最初の項目に分類される可能性が高いようです。同様に、上記の「短い遅延」は、約 150 ミリ秒から約 400 ミリ秒の範囲です。パターン全体のリバース エンジニアリングも行っていません。

mousedownと をフックしない場合mouseup、分布はおおよそ次のようになります。

• (40%) 1:タッチスタート 1:タッチエンド 2:タッチスタート 2:タッチキャンセル
• (35%) 1:touchstart 1:touchend 2:touchstart 2:touchend (実際に望ましい動作)
• (25%) 1:touchstart 1:touchend (2回目のタップは何もしない)

したがって、マウス イベントをフックしないと、3 分の 1 の確率で動作します。touchcancelそして、それがと同じことを意味するふりをしても構わないと思っていればtouchend、最大 75% の確率でそれを得ることができました。しかし、それはまだかなり厄介です。

私がすでに試した代替案：

• jQuery Mobileとeventsvmousedownをvmouseup使用してみましたが、2回目のタップで常にトリガーされるとは限りません。これと同じ根本的なイベントの奇妙さのためだと思います。
• タッチ イベントを完全に忘れて、合成されたマウス イベントのみを使用することもできますが、通常、物理的なタップと合成されたマウス イベントの配信の間に約 0.5 秒の遅延がありますが、タッチ イベントは即時であるため、応答性が高くなります。 . また、スクロールを防止したい - これは全画面表示のゲームのためであり、ユーザーが誤ってアドレスバーをスクロールして戻ってゲームの一部をブロックしてしまうのを防ぎたい -preventDefault通常touchstartはそれを達成します (ただし、時折2回目のタップは、実際には画面をスクロールできますpreventDefault...このイベント全体の混乱を解決したいもう1つの理由）。
• サードパーティの Web ブラウザ ( Dolphin )を試しましたが、イベントに関して同じ問題があります。したがって、おそらく、基になる WebView がイベントをスクリプトに配信する方法に問題があると思います。

HTML、イベントハンドラー、またはその他のものを変更して、2回連続してすばやくタップした場合のタッチイベントを確実に取得する方法を誰かが提案できますか?

現在、ゲームのデバイス（Samsung galaxy S2）でタッチスタート機能をテストしています。私はAndroidのphonegapでラップされたjavascriptとjqueryを使用してプログラミングしており、現在次のような問題があります。

• タッチスタートイベント（たとえば、攻撃ボタンの「タッチスタート」イベントをトリガーしてJavaScriptを実行し、攻撃アクションを実行する）により、画面が一時的にぼやけてから1秒以内に通常の状態に戻り、画像がちらつくような画面のちらつきが発生します。ぎくしゃくする）。私はcss変換やトランジションを使用しておらず、単純なcssと画像だけを使用しています。

誰かが私と同じような問題に遭遇した場合は教えてください。それがハードウェアの問題であろうとタッチスタートの問題であろうと、私がその問題を解決できるのは少し途方に暮れています。

以下のナビゲーションコントロール（左、上、下、右のタッチスタートタップ）のサンプルJavascript：

上記のスクリプトに関して何か問題があると思われる場合はお知らせください。タッチスタートイベントを追加する方法は、たとえば攻撃を開始したり、オプションメニューを起動したりする場合など、スクリプトの他の領域でも同じです。

私には問題があり、何時間も私を困惑させてきました。私は次のhtmlを持っています:

次の CSS を適用しました。

継承を確認しましたが、問題はありません。このコードは、番号が表示されている iPad と iPhone の Safari 以外でテストしたすべてのブラウザで正常に表示されます (番号をクリックすると、電話をかけるかどうかを尋ねられます) が、テキストは白です! 私はプレイし、DIV ID を変更してスタイルを交差させていないことを確認し、スパンcolorをあらゆる種類に変更しましたが、これを変更するものはまったくありません。

他の誰かがこの問題を抱えていますか?

(私は Jquery で touchstart イベントを使用しており、<a>クリックするとこの DIV を表示および非表示にします。方法はわかりませんが、問題を引き起こしている可能性があるため、これについて言及しています。)

touchstart の初期値と touchmove の実際の値の間の距離を計算したい。

例えば ​​：

画面に触れます: startX = 100; 次に、画面上で指を動かします: moveX = 150;

startX と moveX からの距離は (moveX - startX) = 50 です。

コードの更新:

私はAndroidアプリを作成していて、2つのボタンがあります。1スタートと1ストップ。スタートボタンをクリックすると停止ボタンが表示され、停止ボタンが表示され、開始が非表示になります。

STOPボタンでタッチスタートイベントを取得しようとしています（スタートボタンにも追加するのが好きですが、必須ではありません）。ただし、何らかの理由で、以下のコードが正しく機能していません。私が見逃したことを教えてください。

背景：-jqueryを使用してボタンを非表示にします-背景画像付きのボタン

JAVASCRIPT：

HTMLボタン：

Androidのアプリで作業していTitaniumます。私の質問は、チタンでロングタッチを実装する方法ですか? 私はこのようなものが必要です: ユーザーが特定のビューを押し続けて関数を呼び出すとき。私はこれを試しました：

しかし、これは私が望むように機能していません。私の関数 clickTheView(e) は、ビューをクリックするたびに呼び出され、長時間ビューに触れても呼び出されません。

どんなアイデアでも大歓迎です。前もって感謝します。

バックボーンに次のテンプレートがあり、すべてが完全にレンダリングされます。

ただし、次のように記述した場合、タッチスタートはトリガーされません。

できます。jQueryがイベントをバインドできないかのように。何が問題なのですか？

こんにちは、モバイル サファリのモバイル Web アプリケーションでホバー イベントをシミュレートしようとしています。基本的に、私はasp.netボタンを持っています:

ここで、javasrcipt を使用して、タッチ開始イベントとタッチ終了イベントを読み取る関数を作成する必要があります。

次に、 btn-sign-upで切り替えられるこの CSS クラスがあります。

何らかの理由でクラスが変更されていません...コードが間違っているのでしょうか、それともロジックが悪いのでしょうか?