web-dev-qa-db-ja.com

PCブラウザーでのタッチイベントのシミュレーション

IPad用のHTMLアプリケーションを開発しています。そのため、タッチイベントとwebkit-CSSアニメーションを利用します。

これまで、デバッグ環境としてchromeを使用してきました。これは、すばらしい開発者モードだからです。

私が望むのは、PCでGoogle-Chromeのデバッガを使用して、マウスでタッチイベントをシミュレートしながら、Html/JavaScriptをデバッグできるようにすることです。

私のサイトにはマルチタッチイベントはなく、マウスイベントもありません(iPadにはマウスはありません)。

私は実際にアプリケーションのレイアウトを見ることに興味はありませんが、その動作をデバッグすることにもっと興味があります。

デスクトップブラウザでマウスイベントをタッチイベントに変換するプラグインはありますか?

68
eshalev

2012年4月13日現在

Google Chrome開発者とカナリアのビルドでは、「タッチイベントをエミュレート」のチェックボックスがあります

F12開発者ツールを開いて、画面の右下にある歯車をクリックして見つけることができます。

on Chrome v22 Mac OS X

今のところ(Chrome ver.36.0.1985.125)ここで見つけることができます:F12 => Esc => Emulation。 console

96
Simon Sarris

デスクトップブラウザは、追加のJS + CSSをインポートすることにより、タッチイベントをシミュレートできます。を見てみましょう:

  1. addTouch
  2. 幻肢
7
Vlad

このスクリプトを使用します: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ アプリケーション内のすべてのマウスイベントをタッチでトリガーできる代わりにイベント。そのため、右クリック、ドラッグアンドドロップなどを使用するWebアプリケーションが既にあったため、同じ機能をすべてタッチで実行できました。

あなたが探していたシミュレーションのほとんど逆であることは知っています(主にマウスが使用するアプリケーションのスクリプトを作成する必要があります)が、とにかく役立つことを願っています。

2
bishbashbosh

デスクトップブラウザーでマルチタッチをシミュレートする別の方法は、 Hammer.jsのタッチエミュレーター です。

2
Corne

JQ UI libに基づいたこの小さなライブラリに出会いました。かなり気の利いた:

http://touchpunch.furf.com/

Webkitを特に対象としている場合(iPadおよびすべて)、通常のイベントハンドラーコード(add/removeEventListener)を使用できます。それを念頭に置いて、おそらくいくつかのイベントで分岐する必要があります-たとえば、「ontouchstart」は環境に基づいて「onclick」になります。

ただし、このレベルの分岐を提供しているライブラリはありません。とても簡単です。

0
Ryan McGrath