Swipe жесты в Internet Explorer и остальных браузерах

Корпорация Microsoft старается постоянно совершенствовать свой браузер Internet Explorer, расширяя его ключевые веб-стандарты и добавляя современные функции. Начиная с версии IE10 появились жесты. Скорее всего вы уже знакомы с сенсорной навигацией в браузерах для iOS или Android, ведь устройств, поддерживающих touch события, становится все больше. Сейчас не только смартфоны и планшеты обладают такой возможностью, но и настольные компьютеры.

При создание адаптивного сайта, имеющего у себя баннеры, галереи или любые ротационные блоки, хорошим тоном будет поддержать на стороне клиента возможность быстрой прокрутки до нужного места не только с помощью стрелок назад вперед, но и с помощью жестов, если это позволяет устройство пользователя.

В данной статье рассказывается о плагине jquery, который позволяет объединить привычные события touchstart и touchmove с нестандартным видением Microsoft на это.

Плагин, о котором пойдет дальше речь, понимает swipe-жест «назад» и «вперед» и будет представлен в виде нескольких сравнительных блоков из которых будет видно основное действие кода. Скачать его целиком и посмотреть в работе тоже можно. Ссылка внизу.

Для начала, чтобы в браузере Internet Explorer все работало надо сделать две вещи:

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

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

Первый пункт — мета тег X-UA-Compatible управляет режимом отображением страниц в браузерах IE8+.
Второй пункт — полностью отключает стандартную обработку сенсорных взаимодействий и перенаправляет все события указателя в код JavaScript.

Чтобы понять, что мы имеем дело с IE браузером на устройстве, понимающем сенсорные жесты, задаем переменную, которую будем использовать в условиях.

var IE = window.navigator.msPointerEnabled;

И, собственно, как выглядит сам вызов события.

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);

Дальше, в методе swipe.init для не IE запоминаем стартовые координаты touch события, и потом всеми браузерами перемещаемся в метод swipe.onTouchMove

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

Внутри swipe.onTouchMove также происходит разделение по браузерам.

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();
}

В данном случае цифра 10 это смещение в px, которое произошло в момент жеста по экрану. Его можно задать произвольным. От его величины будет зависеть чувствительность реакции на прикосновение.
Далее, в функции switchDirection определяется направление жеста, если значение у swipe.variable.translationX положительное, значит было выполнено событие swiperight, а если отрицательное, то swipeleft.
После того, как стало понятно, что пользователь ожидает от своих действий, выполняется соответствующая функция, та же самая, которая бы сработала при кликах на простые стрелки «назад» или «вперед».

Вызов плагина gestureSwipe выполняется следующим образом.

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

где event может принимать значения swipeleft или swiperight

Если вам необходимо на своей сайте для IE, кроме горизонтальной прокрутки, также поддержать вертикальную или другие жесты, такие как масштабирование или поворот, можно узнать, как это сделать из этой хорошей статьи.
А так же из официальной документации Microsoft.

Полный рабочий пример можно посмотреть тут.

Автор: skada

Источник