Комментарий: Большинство взаимодействий на мобильных телефонах достигаются с помощью прикосновения, поэтому для интерактивных веб -сайтов сенсорного экрана очень важны события. Здесь мы представляем несколько сенсорных событий, которые более популярны. Вы можете проверить это событие в большинстве современных браузеров. Друзья, которые заинтересованы, могут узнать об этом.
ПредисловиеВ чем разница между сайтом сенсорного экрана и традиционным веб -сайтом ПК? Изменения в методах взаимодействия первыми затронуты. Например, событие Click, которое мы часто используем, настолько бессильно под прибором сенсорного экрана.
Большинство взаимодействий на мобильном телефоне достигаются с помощью прикосновения, поэтому касания очень важны для интерактивных веб -сайтов с сенсорными экранами.
Apple представила API события Touch Event в iOS 2.0, и Android догоняет этот стандарт факта, чтобы сузить разрыв. Недавно рабочая группа W3C работает вместе, чтобы сформулировать эту норму события Touch.
спецификация
Здесь мы представляем несколько сенсорных событий, которые более популярны. Вы можете проверить это событие в большинстве современных браузеров (должно быть устройство с сенсорным экраном):
TouchStart: запускается, когда начинается прикосновение
Touchmove: запускается, когда палец скользит на экране
Toucend: запускается, когда заканчивается прикосновение
Каждое событие Touch включает три сенсорных списка, каждый список содержит соответствующую серию сенсорных точек (используется для реализации Multi-Touch):
Прикосновения: список всех пальцев, которые в настоящее время находятся на экране.
TargetTouches: список пальцев, расположенных на текущем элементе DOM.
Изменено: список пальцев, включающих текущее событие.
Каждая точка сенсорной точки содержит следующую информацию о прикосновении (обычно используется):
Идентификатор: значение, которое однозначно идентифицирует текущий палец в сенсорном сеансе. Как правило, номер потока, начинающийся с 0 (Android4.1, UC)
Цель: элемент DOM, является целью, направленной на действие.
pagex/pagex/clientx/clienty/screenx/screeny: значение, где действие происходит на экране (страница содержит расстояние прокрутки, клиент не содержит расстояние прокрутки, экран основан на экране).
Radiusx/Radiushy/rowationAngle: нарисуйте эллипс, приблизительно эквивалентный форме пальца, двух радиусов и угол поворота эллипса соответственно. Предварительный тестовый браузер не поддерживает его, но, к счастью, функции обычно не используются, поэтому все могут отзывы.
С помощью этой информации мы можем предоставить пользователям различную обратную связь на основе этой информации о событиях.
Ниже я покажу вам небольшую демонстрацию, перетаскивание с одним пальцем с помощью Touchmove:
/*Перетащите одним пальцем*/
var obj = document.getElementById ('id');
obj.addeventlistener ('touchmove', function (event) {
// Если в положении этого элемента есть только один палец
if (event.targettouches.length == 1) {
event.preventdefault (); // заблокировать событие по умолчанию браузера, важно
var touch = event.targettouches [0];
// Поместите элемент, где ваш палец
obj.style.left = touch.pagex-50 + 'px';
obj.style.top = touch.pagey-50 + 'px';
}
}, ЛОЖЬ);
Советы по четырем псевдо-классам тега в устройствах на сенсорном экране:
Мы все знаем, что четыре псевдо-класса ссылки на теги, посещаемые, активные и пахнуть предназначены для событий клика, поэтому постарайтесь не использовать их на веб-сайтах с помощью сенсорного экрана. Большинство тестов также недоступны. Но вот небольшой трюк о зависе. Когда вы нажимаете кнопку, кнопка останется в состоянии падения. В настоящее время CSS, которые вы устанавливаете на основе этого псевдокласса, также работает до тех пор, пока вы не нажмете другую кнопку с помощью пальца, состояние Hover будет перенесено на другую кнопку. Используя это, мы можем сделать несколько небольших эффектов. Этот трюк все еще доступен в большинстве браузеров.
Идеалы полны, реальность худаю!
Несмотря на то, что W3C готов к мультизатуру, к сожалению, лишь немногие браузеры поддерживают функции с несколькими приземлениями, особенно браузеры на платформах Android, что делает список пальцев, представленные выше, становятся пустыми разговорами. Захват двух точек касания приведет прямо к сбое прикосновения! К счастью, браузер Safari, который поставляется с устройствами iOS, может поддержать эту функцию, что делает нас полными надежды на будущее. В конце концов, мы слишком долго были заключены в тюрьму с одной точкой мыши. Как интересно использовать сайт больше!