Simulating touchstart and touchend events?

Question

I'm developing a jquery component which works primarily for ipad. So is there anyway to simulate 'touchstart and 'touchend' events in desktop rather than having the device itself to check the events.

Solution 1

You can author your own custom events within jQuery:

var event = $.Event( "touchstart", { pageX:200, pageY:200 } );

And you can issue them against any element in the DOM:

$("body").trigger( event );

Demo: http://jsbin.com/ezoxed/edit#javascript,html
Further reading: http://api.jquery.com/category/events/event-object/

Keep in mind that there are various other types of interfaces on the market now that don't support touchstart and touchend events. For instance, Windows 8 is already occupying tablets in the mobile market, and it uses a more abstracted event model consisting of Pointers.

Solution 2

Chrome Dev-tools within a Chrome Browser allows you to emulate touch events. See https://developers.google.com/chrome-developer-tools/docs/mobile-emulation.

From the docs...

Emulating Touch Events

Touch is an input method that's difficult to test on the desktop, since most desktops don't have touch input. Having to test on mobile can lengthen your development cycle, since every change you make needs to be pushed out to a server and then loaded on the device.

A solution to this problem is to simulate touch events on your development machine. For single-touches, the Chrome DevTools supports single touch event emulation to make it easier to debug mobile applications on the desktop.

To use from a Chrome browser (as of version 29.0.1547.65):

1. Select the Chrome menu at the top-right of your browser window (three stacked lines).
2. Select Tools > Developer tools. (Shortcut Shift+Control+I)
   A tools window will appear on the bottom with the tab Console selected.
3. In the bottom right click on the settings cog (look like a gear).
   A setting panel will appear with "General" on top.
4. Click "Overrides" on left to select overrides panel.
5. Scroll down and check "Enable touch events"
6. Reload your page

You mouse will now appear as a fuzzy circle. Click to "touch".

Solution 3

As of 2018, Chrome DevTools supports device emulation outright, without any need for override setting. Just toggle the device toolbar (Ctrl + Shift + M) to get the browser into mobile mode, then touch events can be triggered by the mouse.