Simulating touch events on a PC browser

Asked 7/2, 2011 at 8:15 Answered 31/10, 2016 at 14:32

Solved javascript ipad html google-chrome touch

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?

Marmawke answered 7/2, 2011 at 8:15 Comment(2)

There's no substitute for debugging your site on a real device (especially if you ever decide to support multi-touch). Fortunately, debugging in Chrome mobile is very easy now, you can debug remotely via your PC. You can connect to ADB via Wi-Fi, too, no USB cable needed. – Meggie 28/12, 2015 at 11:7

check here freakyjolly.com/how-to-test-touch-behavior-in-google-chrome – Inadmissible 31/10, 2018 at 6:14

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

Weingarten answered 14/4, 2012 at 1:13 Comment(7)

no checkbox for me. chrome 18.0 osx lion. clicked on the small gear but there's no checkbox for that! – Takin 7/5, 2012 at 13:29

Emulate touch events is in Chrome 19 and above. – Lanark 15/5, 2012 at 18:48

What does "emulate touch events" actually mean? – Starfish 18/7, 2012 at 13:11

You can "use" those touch events when holding the mouse button and moving the mouse like you would move your finger. To be honest, this is not really well implemented and only works for ONE finger, as ... well ... we only have one mouse cursor (or you have a multi-touch-point laptop touchpad) – Honorable 9/4, 2013 at 15:32

saved me trying to integrate alot of unnecessary libraries – Ancestry 28/12, 2013 at 20:31

I was able to simulate a pinch-to-zoom touch event by holding down shift, left-clicking, and then sliding my finger up and down on the trackpad. This is different than the docs which say "Hold Shift while dragging the mouse to emulate a pinch gesture." That didn't do anything for me. – Styracaceous 11/12, 2014 at 16:16

Supposedly multi-touch events can be simulated on "devices that support multi-touch input, such as laptops with trackpads." I have a Dell M4800 with multi-touch trackpad, and it's not working for me on Paul Irish's demo. – Styracaceous 11/12, 2014 at 16:21

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

Kolb answered 16/6, 2011 at 7:54 Comment(1)

@weird... thumbs.js presents touch events that have none of the touch fields I would expect (such as "touches")! – Rowland 18/2, 2018 at 5:8

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

Grenoble answered 31/10, 2016 at 14:32 Comment(0)

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.

Lindsaylindsey answered 17/5, 2011 at 11:15 Comment(0)

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.

Crooked answered 7/2, 2011 at 10:55 Comment(1)

Thanks, this is what I am doing now. But..., alot of my code has to do with writing engaging custom controls, which means that each control has it's own unique behaviour when touched. So I am looking for a piece of javas-cript that can do this once at the document level (while maintaining independent OnTouch for each different document element.). Or maybe a browser plugin. It seems like a generic enough requirement (debugging mobile web-sites from a desktop browser...) – Marmawke 7/2, 2011 at 13:56

Recommended topics

Hot tags