在PC浏览器上模拟触摸事件

Question

I am developing an HTML application for the iPad. As such it utilizes touch events and webkit-CSS animations.

Up until now I have used chrome as my debugging environment because of it's awesome developer mode.

What I would like is to be able to debug my Html/JavaScript using Google-Chrome's debugger on my PC while simulating touch events with my mouse.

My site does not have any multi-touch events and no mouse events (no mouse on iPad).

I am not actually interested in seeing the applications layout, but more in debugging its behavior.

Is there some plugin to get mouse events translated into touch events on a desktop browser?

Answer 1

As of April 13th 2012

In Google Chrome developer and canary builds there is now a checkbox for "Emulate touch events"

You can find it by opening the F12 developer tools and clicking on the gear at the bottom right of the screen.

For now (Chrome ver.36.0.1985.125) you can find it here: F12 => Esc => Emulation.

Answer 2

The desktop browser can simulate touch events by importing additional JS + CSS. Take a look at:

1. addTouch
2. Phantom Limb

Answer 3

另一种在桌面浏览器上模拟多点触控的方法是Hammer.js的Touch Emulator

Answer 4

We use this script: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ It will allow all mouse events in your application to be triggered by touch events instead. So, since we already had a web application that used right-clicking, drag-n-drop etc. it allowed us to perform all of the same functionality with touch.

I know it's almost the reverse of the simulation you were looking for (you will have to script your application to primarily be used by a mouse) but I hope it helps anyway.

Answer 5

I came across this little library based on the JQ UI lib. Pretty nifty:

http://touchpunch.furf.com/

Answer 6

If you're targeting Webkit specifically (iPad and all), you can rely on normal event handler code (add/removeEventListener). With that in mind, you probably need to just branch on a few events - eg, 'ontouchstart' becomes 'onclick' based on the environment.

Offhand I don't know of any libraries providing this level of branching, though. Pretty easy to do yourself.