Menu
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.
643
The touchstart event occurs when the user touches an element. Note: The touchstart event will only work on devices with a touch screen. The numbers in the table specify the first browser version that fully supports the event.
The touchend event occurs when the user removes the finger from an element. Note: The touchend event will only work on devices with a touch screen. The numbers in the table specify the first browser version that fully supports the event.
Use of the preventDefault () or stopPropagation () method: This method prevents the event handler from responding to both touchstart and clicks events.
Execute a JavaScript when the user touches a P element (for touch screens only): The touchstart event occurs when the user touches an element. Note: The touchstart event will only work on devices with a touch screen. The numbers in the table specify the first browser version that fully supports the event.
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.
51
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):
You mouse will now appear as a fuzzy circle. Click to "touch".
6
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
