1. ホーム
  2. jquery

[解決済み] [Solved] 'touchstart'と'click'イベントをバインドして、両方に反応しないようにするにはどうしたらいいですか?

2022-04-13 03:12:31

質問

さまざまなデバイスで動作するモバイル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
});