Эмуляция сенсорного события с помощью Chrome

Сенсорный экран с функциями multi-touch произвел революцию в мобильных устройствах, таких как смартфон и планшет, поэтому добавление функции multi-touch на наш веб-сайт является практическим выбором. Проблема, с которой мы сталкиваемся, заключается в том, что мы разрабатываем веб-сайты на традиционном рабочем столе, который не имеет возможности сенсорного экрана. Итак, как нам отладить событие Touch, если с ним что-то не так?

Chrome сделал отладку Touch возможной и простой на рабочем столе. В то время как мы традиционно заполняем наш веб-сайт событиями, связанными с мышью, такими как щелчок мышью, щелчок мышью и mousedown, Google Chrome позволяет нам эмулировать событие Touch без использования устройства с сенсорным экраном.

Позвольте мне показать вам, как.

Сенсорная эмуляция

Я создал демонстрационную страницу со ссылкой Modernizr, чтобы увидеть возможности браузера. На данный момент, как вы можете видеть на следующем снимке экрана, Chrome для настольных компьютеров не поддерживает Touch, что обозначается классом без касания в теле.

В Chrome есть возможность эмулировать сенсорное событие / взаимодействие. Для этого откройте «Настройки инструментов разработчика» и перейдите на вкладку «Переопределить» слева.

Выберите опцию «Эмулировать сенсорные события» и обновите окно.

Теперь, если вы посмотрите на имя класса в теле, оно изменилось на сенсорное, а указатель мыши превратился в круг. Это показывает, что Chrome поддерживает Touch.

Чтобы проверить это, вы можете добавить следующий JavaScript в ваш документ.

var obj = document.getElementById ('toucharea');

obj.addEventListener (‘touchmove’, функция (событие) {
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’;
}
}, ложный);

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

Кроме того, вы также можете проверить это с SwipeJS – Мобильный оптимизированный слайдер изображений. Удерживая нажатой кнопку мыши, перетащите ее вправо и влево на демонстрации Slider, слайд должен следовать за позицией курсора мыши.

Вывод

Что касается инструмента для веб-разработки, то Google Chrome, на мой взгляд, на несколько шагов опережает другие браузеры. Он содержит инструменты для современной разработки, такие как Touch Emulation – хотя реализация ограничена жестами одним пальцем, а не двумя или более жестами (пока).

Также обратите внимание, что эмуляция Touch будет отменена, когда инструмент разработчика будет закрыт.