Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Simulating touch events on a PC browser

Tags:

javascript

html

google-chrome

ipad

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?

like image 550
eshalev Avatar asked Feb 07 '11 08:02

eshalev

People also ask

How do I test touch events on my desktop?

Activate the Developer Tools with CMD+ALT+i (OSX) or F12 (Windows). Click the cog icon to open up it's settings. Then switch to the Overrides tab. Make sure Enable is checked and then activate Emulate touch events.

How do I enable touch simulation in chrome?

While on Chrome, press F12 to toggle Developer Mode. Then, you can switch between devices at the top. This will mimic touch gestures made by a real device.

How do you simulate a touch screen?

The Chrome Browser integrates a nice feature to simulate multiple mobile devices or a touch screen. Now close the settings and press the ESC (Escape Key) and switch to the "Emulation" Panel (2). The "Sensors" menu (3) let's you enable the "Emulate touch screen" (4) checkbox. That's it!

How do you implement touch events?

Add the touch point handlers to the specific target element (rather than the entire document or nodes higher up in the document tree). Add touchmove , touchend and touchcancel event handlers within the touchstart . The target touch element or node should be large enough to accommodate a finger touch.

1 Answers

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

like image 64
Simon Sarris Avatar answered Sep 17 '22 01:09

Simon Sarris
Sign in to Comment

Related questions

How do I select more than 1 framework with jsFiddle?
Spying on a constructor using Jasmine
Why is NaN === NaN false? [duplicate]
backbone.js structuring nested views and models
Can I trigger JavaScript's garbage collection?
How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
List of all characters that should be escaped before put in to RegEx?
React: trigger onChange if input value is changing by state?
Access object properties within object [duplicate]
Possible to defer loading of jQuery?
Firebase query if child of child contains a value
Highlight selected node, its links, and its children in a D3 force directed graph
Is there a better way to create an object-oriented class with jQuery?
How to copy a DOM node with event listeners?
Why does 00.0 cause a syntax error?
how to use jQuery ajax calls with node.js
Why does jQuery show/hide use display:none instead of visibility:hidden?
What is the purpose of new Boolean() in Javascript?
Does something like jQuery.toggle(boolean) exist?
Using reactjs with requirejs

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!