В этой статье вы прочитаете про JavaScript библиотеку Hammer.js благодаря которой сможете делать различные жесты как для мыши, так и для тач экранов, или сенсорных экранов как их ещё называют, думаю будет интересно.
Также если вы интересуетесь различными JavaScript библиотеками, то рекомендую почитать статью «Jest тестирование в JavaScript», где вы научитесь тестировать с Jest.
Быстрый старт Hammer.js:
Hammer — это библиотека с открытым исходным кодом, которая может распознавать жесты, сделанные касанием, мышью и указателем событий. У него нет никаких зависимостей, и она небольшая, всего 7,34 КБ с минимизацией + сжатие с помощью gzip!
Я советую скачать вам библиотеку из этой ссылке, заходите туда, нажимаете комбинацию клавиш «Ctrl + S» и перемешаете в папку с вашем проектом.
Использование:
Его легко использовать, просто подключите библиотеку и создайте новое событие.
1 2 3 4 | var hammertime = new Hammer(myElement, myOptions); hammertime.on('pan', function(ev) { console.log(ev); }); |
По умолчанию он добавляет набор распознавателей касания, двойного касания, нажатия, горизонтального панорамирования и прокрутки, а также мультисенсорного нажатия и поворота. Распознаватели долгого нажатия и поворота по умолчанию отключены, потому что они могут блокировать элемент, но вы можете включить их, вызвав:
1 2 | hammertime.get('pinch').set({ enable: true }); hammertime.get('rotate').set({ enable: true }); |
Включение вертикальных или всех остальных направлений для распознавателей панорамирования и смахивания:
1 2 | hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL }); hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL }); |
Также рекомендуется использовать метатег области просмотра, он дает больше контроля над веб-страницой, отключая двойное касание/масштабирование пальцем. Более поздние браузеры, поддерживающие свойство touch-action, этого не требуют.
1 | <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> |
Больше контроля:
Вы можете настроить свой собственный набор распознавателей для своего экземпляра. Для этого требуется немного больше кода, но это дает вам больше контроля над распознаваемыми жестами.
1 2 3 4 5 6 7 | var mc = new Hammer.Manager(myElement, myOptions); mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) ); mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) ); mc.on("pan", handlePan); mc.on("quadrupletap", handleTaps); |
В приведенном выше примере создается экземпляр, содержащий панорамирование и жест четырёхкратного касания. Созданные вами экземпляры распознавателя выполняются в том порядке, в котором они были добавлены, и только один из них может быть распознан одновременно.
Вывод:
В этой статье вы прочитали про JavaScript библиотеку Hammer.js, благодаря которой вы сможете делать жесты для мыши или тач экранов, но тут был только быстрый старт, который знакомит с этой библиотекой, поэтому если вас она заинтересовала, то можете почитать полную документацию.
Подписываетесь на соц-сети:
Оценка:
Загрузка...