开发者

Simulating touch events on a PC browser

开发者 https://www.devze.com 2023-02-08 18:50 出处:网络
I am developing an HTML application for the iPad. As such it utilizes touch events and webkit-CSS animations.

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?


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.

Simulating touch events on a PC browser

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

Simulating touch events on a PC browser


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

  1. addTouch
  2. Phantom Limb


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


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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消