Emulating Touch Events in Chrome

Touchscreens with multi-touch capabilities have completely transformed mobile devices like smartphones and tablets. It would be practical to add multi-touch functionality to our website as well. However, we face a dilemma when developing websites on a traditional desktop that lacks touchscreen capabilities. So, how can we debug a touch event if something goes wrong?

Thankfully, Chrome has made it possible to debug touch events on desktop computers. While we typically rely on mouse-related events like click, mouseup, and mousedown when testing our websites, Google Chrome now allows us to emulate touch events without needing an actual touchscreen device.

Let me demonstrate how this works.

Touch Event Emulation

So, I’ve made this nifty little page that shows you what your browser can do. It’s got this thing called Modernizr, which helps me see all the cool features. But guess what? I noticed that Chrome for desktop doesn’t support Touch. Bummer, right? You can tell because there’s a class in the body that says “no-touch.” Check out the screenshot below to see it in action.

Now, the fun part! Chrome actually has a way to pretend like it supports Touch. All you have to do is open up the Developer Tools Setting and go to the “Override” tab on the left. From there, you can enable Touch event/interaction and see what it’s like. Pretty cool, huh?

To make the necessary changes, follow these steps:

First, select the “Emulate touch events” option. Then, refresh the window to apply the changes.

Now, if you look at the class name in the body, you’ll notice it has changed to “touch” and the mouse pointer has transformed into a circle. This indicates that Chrome is now supporting touch.

To try it out, you can simply include the following JavaScript code in your document:

“`javascript

var obj = document.getElementById(‘toucharea’);

obj.addEventListener(‘touchmove’, function(event) {

if (event.targetTouches.length == 1) {

var touch = event.targetTouches[0];

var x = document.getElementById(‘pagex’);

var y = document.getElementById(‘pagey’);

x.textContent = touch.pageX + ‘px’;

y.textContent = touch.pageY + ‘px’;

}

}, false);

“`

Hold down your mouse button and drag it around the window – this code will show you the cursor’s position. To see it in action, you can visit the demo page.

Additionally, you can test it with SwipeJS, a mobile-friendly image slider that allows you to swipe through images. Simply hold down your mouse button and drag it to the right or left on the Slider demo, and the slide will follow your mouse cursor’s position.

The Bottom Line

As a web developer, I believe that Google Chrome is truly a cut above the rest when it comes to the tools it offers. In my experience, it stands head and shoulders above other browsers. One feature that sets it apart is Touch Emulation, which allows you to simulate touch gestures on your device. While it does have some limitations – currently limited to 1-finger gestures rather than multiple fingers – it is still a valuable tool for modern development.

However, it’s important to note that when you close the Developer Tools, the Touch Emulation feature will be deactivated. So keep that in mind as you’re working on your projects.