Detecting Touch Pointer Events With jQuery on Windows Phone 8.1, IE 11

You may be using jQuery to detect pointer events, such as ‘touchstart’ or ‘MSPointerDown’, for example, for toggling a mobile menu when the user touches a button on a mobile touch-screen device. The ‘MSPointerDown’ event for Windows phones and Internet Explorer would have worked in IE 10, but not in IE 11. Likewise, for many Nokia phone users (i.e. Nokia Lumia), the ‘MSPointerDown’ event works until they update to Windows Phone 8.1. With the 8.1 update, they get IE 11, and then the pointer event breaks.

There is an easy fix for this. In IE 11, “window.navigator.msPointerEnabled” becomes “window.navigator.pointerEnabled”.

Use if (window.navigator.pointerEnabled) to detect IE 11, and use
if (window.navigator.msPointerEnabled) to detect IE < 11.

The touch event in IE 10 was “MSPointerDown”. In IE 11, this becomes “pointerdown”.

Here is an example that will detect a touch on touch devices on basically any browser, including Internet Explorer 11, and also detect a regular mouse click on desktops.

$( document ).ready( function( $ ) {
	if ('ontouchstart' in window) {
		eventType = 'touchstart';
	} else if (window.navigator.pointerEnabled) {
		eventType = 'pointerdown';
	} else if (window.navigator.msPointerEnabled) {
		eventType = 'MSPointerDown';
	} else {
		eventType = 'click';
	}
	
	$(document.body).on(eventType, function(e) { 

		// A touch or click is detected 

		// console.log(e)

	});

});