[解決済み] [Solved] 'touchstart'と'click'イベントをバインドして、両方に反応しないようにするにはどうしたらいいですか?
質問
さまざまなデバイスで動作するモバイルWebサイトを制作しています。今、頭を悩ませているのはBlackBerryです。
キーボードのクリックとタッチイベントの両方をサポートする必要があります。
理想は使うだけ。
$thing.click(function(){...})
しかし、ブラックベリーの一部のデバイスでは、タッチしてからクリックされるまでに非常に大きな遅延が発生するという問題があります。
改善策としては、代わりにタッチスタートを使用することです。
$thing.bind('touchstart', function(event){...})
しかし、両方のイベントをバインドして、片方だけを実行するにはどうしたらよいでしょうか。キーボードデバイスの場合はクリックイベントが必要ですが、タッチデバイスの場合はもちろんクリックイベントは発生させたくありません。
おまけの質問です。タッチスタートイベントを持たないブラウザに対応する方法はありますか?調査したところ、BlackBerry OS5はtouchstartをサポートしていないので、そのブラウザのクリック イベントに依存する必要があるようです。
追記
おそらく、より包括的な質問であろう。
jQueryで、タッチインタラクションとマウスインタラクションを同じバインディングで処理することは可能ですか/推奨されますか?
理想を言えば、答えは「イエス」です。もしそうでなければ、いくつかの選択肢があります。
1) WURFL を使ってデバイス情報を取得しているので、独自のデバイスのマトリックスを作成することができます。デバイスによっては、タッチスタートまたはクリックを使用します。
2)JSでブラウザのタッチサポートを検出する(これについてはもう少し調べる必要があるが、可能なようだ)。
しかし、それでも1つの問題が残ります。それは、両方に対応しているデバイスはどうするかということです。私たちがサポートしている携帯電話(NokiasやBlackBerryなど)の中には、タッチスクリーンとタッチパネルの両方を搭載しているものがあります。 と キーボード どうにかして、両方を同時に使えるようにする方法はないでしょうか?
解決方法は?
更新情報 : jQueryをチェックアウトする ポインタイベントポリフィル このプロジェクトでは、マウスとタッチのどちらかを選択する代わりに、"pointer" イベントへのバインドを可能にします。
ただし、フラグを立てて、100msに一度だけ起動するようにします。
var flag = false;
$thing.bind('touchstart click', function(){
if (!flag) {
flag = true;
setTimeout(function(){ flag = false; }, 100);
// do something
}
return false
});
関連
-
[解決済み】Ajaxクロスオリジンリクエストがブロックされました。同一生成元ポリシーがリモートリソースの読み取りを不許可にする
-
[解決済み] フォーム送信のjQueryが動作しない
-
[解決済み] jQueryがfadeOutで動作しない
-
[解決済み] jQueryで関数呼び出しを繰り返す方法
-
[解決済み] jQueryのinit関数を設定する
-
[解決済み] jQuery .validate() submitHandler が起動しない
-
[解決済み] jQueryを使って下までスクロールさせる
-
[解決済み] JavaScript / jQuery のイベントバインディングを Firebug などでデバッグするには?
-
[解決済み] JavaScriptで「タッチパネル」デバイスを検出する最適な方法とは?
-
[解決済み] 子アンカーがクリックされたときに、親のonclickイベントが発生しないようにするにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQuery - 不正な呼び出し
-
[解決済み] フォーム送信のjQueryが動作しない
-
[解決済み] リーフレット - 既存のマーカーを検索したり、マーカーを削除するには?
-
[解決済み] jQueryでdiv内のspanにテキストを追加する
-
[解決済み] jQuery - 小数点以下2桁に丸め、その数値で計算する。
-
[解決済み] jQuery.whenの理解
-
[解決済み] jQueryやJavaScriptを使用してURLパラメータを取得するには?
-
[解決済み] jquery autocomplete が動作しない
-
[解決済み] jQueryを使って下までスクロールさせる
-
[解決済み] JavaScriptで「タッチパネル」デバイスを検出する最適な方法とは?