Swipe gestures in Internet Explorer and other browsers

Microsoft is constantly striving to improve its Internet Explorer browser by expanding its key web standards and adding advanced features. Starting with the version of IE10 gestures appeared. Most likely you are already familiar with touch navigation in browsers for iOS or Android, because devices that support touch events are becoming more and more. Now not only smartphones and tablets have this feature, but also desktop computers.

When creating a responsive website that has banners, galleries or any rotation blocks, on the client side it is good practice to quickly scroll to the right place not only with the help of backward arrows, but also with gestures if the user's device allows it.

This article describes the jquery plugin, which allows you to combine the usual touchstart and touchmove with Microsoft's non-standard vision for this.

The plugin, which will be discussed further, understands the swipe-gesture "back" and "forward" and will be presented in the form of several comparative blocks from which the main action of the code will be seen. Download it entirely and see it in work too. Link below.
')
To begin with, in Internet Explorer everything works, you need to do two things:

 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

 #swipe { -ms-touch-action: none; } 

The first item is the meta tag X-UA-Compatible controls the mode of displaying pages in IE8 + browsers.
The second point - completely disables the standard processing of sensory interactions and redirects all pointer events to the JavaScript code.

To understand that we are dealing with an IE browser on a device that understands touch gestures, set the variable that we will use in conditions.

 var IE = window.navigator.msPointerEnabled; 

And, actually, what the event call itself looks like.

 var touchElem = document.getElementById('swipe'); if (IE && window.MSGesture) { //events for IE var eventStart = "MSGestureStart", eventMove = "MSGestureChange"; var msGesture = new MSGesture(); msGesture.target = touchElem; touchElem.addEventListener('MSPointerDown', function(event) { msGesture.addPointer(event.pointerId); }); } else { //events for other browsers var eventStart = "touchstart", eventMove = "touchmove"; } touchElem.addEventListener(eventStart, function (e) { swipe.init(e, eventMove); }, false); 

Further, in the swipe.init method for non-IE, we remember the starting coordinates of the touch event, and then all browsers move to the swipe.onTouchMove method

 if(!IE) { if (e.pageX || e.targetTouches[0].pageX) { swipe.variable.startX = e.pageX || e.targetTouches[0].pageX; } } touchElem.addEventListener(eventMove, swipe.onTouchMove, false); 

Inside swipe.onTouchMove there is also a separation by browser.

 if(IE) { if (e.detail == e.MSGESTURE_FLAG_INERTIA) return; swipe.variable.translationX += e.translationX; } else { var newX = e.pageX || e.targetTouches[0].pageX; swipe.variable.translationX = newX - swipe.variable.startX; } if (Math.abs(swipe.variable.translationX) > 10) { swipe.switchDirection(); } 

In this case, the number 10 is the offset in px, which occurred at the time of the gesture on the screen. It can be set arbitrary. The sensitivity of the touch response will depend on its magnitude.
Further, in the switchDirection function, the direction of the gesture is determined, if the value of swipe.variable.translationX positive, then the swiperight event was swiperight , and if negative, then swipeleft .
After it became clear that the user expects from their actions, the corresponding function is executed, the same one that would work if you click on the simple arrows “backward” or “forward”.

The call to the gestureSwipe plugin is as follows.

 $('#swipe').gestureSwipe('event', eventHandler); 

where event can be swipeleft or swiperight

Microsoft official documentation .

A full working example can be found here .