Touch Event Emulation with Chrome

By . Filed in Web Design

Touchscreen with multi-touch features have revolutionized mobile devices like the smartphone and the tablet, so adding multi-touch capability to our website is a practical choice. The problem we face with this is that we are developing websites on a traditional desktop that has no touchscreen capability. So, how do we debug a Touch event, if something is wrong with it?

Chrome has made debugging Touch possible and easier on the desktop. While we traditionally fill our website with Mouse-related events – such as click, mouseup, and mousedown – Google Chrome allows us to emulate Touch event without the use of a touchscreen device.

Let me show you how.

Touch Emulation

I have created a demo page with Modernizr linked to see the browser features. At this point, as you can see in the following screenshot, Chrome for desktop does not support Touch, which is indicated with the no-touch class within the body.

Chrome has an option to emulate Touch event/interaction. To do so, open Developer Tools Setting, and go to the "Override" tab on the left.

Select the "Emulate touch events" option, and refresh the window.

Now, if you take a look at the class name in the body, it changed to touch, and the mouse pointer turned into circle. It shows that Chrome supports Touch.

To test it, you can add the following JavaScript in 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 click, and drag it around the window, this code will generate the cursor position. You can go to the demo page to see it in action.

 

In addition, you can also test it with SwipeJS – a mobile optimized and swipeable image slider. Hold you click and drag it to the right and left on the Slider demo, the slide should follow your mouse cursor position.

Conclusion

When it comes to tool for web development, Google Chrome, in my opinion, is several steps ahead from other browsers. It is packed with tools for modern development such as Touch Emulation – although the implementation is limited to 1-finger gestures, not 2 or more gestures (yet).

Please also note that the Touch emulation will be discarded when the Developer Tool is closed.

Author:

Thoriq is a writer for hongkiat.com. He is also a web developer with very unpredictable sleep cycle.

Advertisement

Comments are closed. Contact Us.