How to Emulate Touch Events in Chrome for Web Development

Touchscreen technology, especially with multi-touch features, has transformed the way we interact with mobile devices like smartphones and tablets. Incorporating multi-touch capabilities into websites is now a practical and often necessary choice. However, a common challenge arises when developing these websites on a traditional desktop that lacks touchscreen functionality. So, how can we debug a Touch event if something goes wrong?

Fortunately, Chrome has made debugging Touch events on desktop much easier. While websites have traditionally relied on mouse-related events like click, mouseup, and mousedown, Google Chrome allows us to emulate Touch events without needing a touchscreen device.

Let me show you how to set this up.

Touch Emulation in Chrome

I’ve created a demo page with Modernizr to detect browser features. As shown in the following screenshot, Chrome for desktop initially does not support Touch, which is indicated by the no-touch class within the body tag.

Chrome provides an option to emulate Touch events and interactions. To do this, open Developer Tools Settings, and navigate to the “Override” tab on the left.

Select the “Emulate touch events” option, and refresh the window.

After enabling this setting, you’ll notice that the class name in the body tag changes to touch, and the mouse pointer turns into a circle, indicating that Chrome now supports Touch.

To test this feature, you can add the following JavaScript to your document:

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 your mouse click and drag it around the window – this code will display the cursor’s position. You can visit the demo page to see this in action.

View demo Download source

Additionally, you can test this with SwipeJS – a mobile-optimized and swipeable image slider. Hold your mouse click and drag left or right on the Slider demo, and the slide should follow your cursor’s movement.

Conclusion

When it comes to tools for web development, Google Chrome is, in my opinion, several steps ahead of other browsers. It’s packed with features for modern development, such as Touch Emulation. However, note that the implementation is currently limited to single-finger gestures, and multi-finger gestures are not supported yet.

Please also note that Touch emulation will be disabled when the Developer Tools are closed.