CODEWITHSUNDEEP
javascriptipadhtmlgoogle-chrometouch
eshalev
eshalev

Reputation: 3275

Simulating touch events on a PC browser

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?

Upvotes: 72

Views: 56976

Answers (5)

Corne
Corne

Reputation: 646

Another way to simulate multi touch on a desktop browser is the Touch Emulator of Hammer.js

Upvotes: 3

Simon Sarris
Simon Sarris

Reputation: 63872

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.

on Chrome v22 Mac OS X

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

Upvotes: 97

Vlad
Vlad

Reputation: 754

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

  1. addTouch
  2. Phantom Limb

Upvotes: 7

bishbashbosh
bishbashbosh

Reputation: 369

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.

Upvotes: 2

Ryan McGrath
Ryan McGrath

Reputation: 2042

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 - e.g, '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.

Upvotes: 0

Related Questions