2012-03-11 7 views
10

モバイルブラウザは、マウスイベントをシミュレートして、ハンドラーのみをマウスイベントに接続するWebサイトをサポートします。ただし、マウスイベント用とタッチイベント用の2つのインタラクションモデルを実装する場合は、ブラウザがマウスイベントをシミュレートするのを防ぐのが便利です。 iOSのSafariでモバイルブラウザでマウスイベントをシミュレートするのを防ぐにはどうすればよいですか?

が、これはかなり簡単です - 単にtouchend上でpreventDefaultを実行します。かなりまともだ

jQuery(document).on('touchend', function(e) { 
    // Do some logic  
    e.preventDefault(); 
}); 

。残念なことに、AndroidのデフォルトブラウザもDolfinも、この手法を使用してマウスシミュレーションをキャンセルすることはありません。 (DolfinはtouchstartでpreventDefaultが実行されたときにmousedownをキャンセルしますが、これはあまり役に立ちません。

条件付きでも、条件付きでもない方法がありますかシミュレートされたマウスイベントが発射されるのを防ぎますか?

[EDIT]

問題(複数可)をよりよく理解するために開始するために、私がタッチイベントの適合表を開始しました:http://labs.cruncher.ch/touch-events-compatibility-table/

+0

また、モバイルChromeやFFでの経験からのコメントも高く評価されています。 – stephband

+2

マウスイベントを接続する前に、モバイルブラウザであるかどうかを検出できますか? –

+0

@ JaredFarrishモバイルブラウザの検出方法は決して100%正確ではありません。 –

答えて

3

これを達成するために、いくつかの狡猾な方法がありますが、私はこの矛盾を回避するために使用する2つの一般的な慣習があります。

1)は、このようななどのフラグ

あなたのイベントハンドラでブールフラグを設定し、使用しますまたはmouseIsMovingを設定して、マウスおよびタッチイベントを確認できます。ユーザーがマウスをクリックした場合、それをマウスイベントとして受け入れます。それと一緒にタッチイベントが発生した場合は、それを無視します。

2)さて、これはとにかく良い習慣です

必要だものだけを実装します。必要がない場合は、touchmovemousemoveイベントを追加しないでください。コードを維持するのが難しくなります。編集:より具体的になっているはずです。より高度なイベントトラッキングが必要な場合は、UIを再考することを検討してください。

最後に、外部ハードウェア構成リストには依存しないでください。これらはまったく正確ではありません。

+0

あなたの最初の提案は基本的に '$(document.body)です。mousemove() 'は、グローバルフラグをセットしてから削除され、マウスの存在を検出するために各' mouse-'イベントで使われるでしょうか? –

+0

1)シミュレートされたイベントの問題は、最初にタッチイベントが発生した後、マウスイベントが発生するため、マウスイベントが発生するまでにタッチイベントは既に終了しています。第二に、このような状態を格納することは、複数のタッチを扱うときに、(あなたが何をしているかに応じて)かなり毛深くなる可能性があります。私は可能な限り状態を保存しないようにしています。第3に、私はマウスイベントを使用するように既に書かれているコードを扱いたいと思っています。私たちはすべてのハンドラに入り、私たちがタッチインタフェースにいるかどうか条件付きで問い合わせるコードを挿入したくありません。私はあなたの答えを、ありがとう! – stephband

+0

また、私はあなたの第二の考えは本当に別のアプローチではないと思います。あなたの本当の答えは最初のもので、二番目のものはあなたが本当に必要なもの(常に良いアドバイス)を慎重に考えていることを思い出させるものです。 –

関連する問題