Enabling Touch events in a desktop browser

When you are developing a mobile site, you must keep in mind that the devices with touchscreen input has entirely different set of events compared to your computer which is getting its events from the mouse.

However, debugging and checking your site in your phone is not that easy and would be sometimes uncomfortable. This is because all of your web developer tools is in your computer. Sometimes, you also need to make sure that certain function will work in case someone visited your mobile site. The trick here is to, map each touch events to the appropriate events for the desktop browser.

If you just want to do it in your local browser (not to all visitors of the site), you could just do this in your Google Chrome browser:

1. Type chrome://flags/ in address bar
2. then enable "Force enable touch events"

But if you want to have this enabled in all visitors, obviously, you cant ask all of them one by one to tweak their Chrome setting. What you can do is use the fingerblast.js library to map each touch event.

To use fingerblast.js, all you need to do is of course load it in your page, then right before the closing body tag, put this:

This will create a new fingerblast object and set listeners to the body tag.

Note that at the time of writing, this is only possible with Chrome browser. If you are looking for some kind of cross-browser compatibility, you should start considering porting your application to jQuery Mobile.

---

• ← Previous Post
• Next Post →