События сенсорных экранов
Источник информации: yournet.kz/blog/js/
Для работы с устройствами с сенсорным экраном в Javascript используются специальные события, на которые следует выполнять какие-либо действия, скажем, это может быть «swipe» (подобие перелистывания), или что-либо ещё.
| Имя события | Описание |
|---|
| touchstart | Событие срабатывает при возникновении касания к элементу. |
| touchmove | Событие возникает после того как пользователь прикоснулся к элементу, и перемещает палец в другую точку. |
| touchend | Событие возникает после разрыва прикосновения к элементу. |
| touchenter | Событие возникает при условии, что касание происходит в пределах элемента. |
| touchleave | Событие возникает, когда точка соприкосновения выходит за рамки элемента. |
| touchcancel | Событие возникает тогда, когда точка соприкосновения больше не регистрируется на поверхности. К примеру, перемещение за пределы браузера. |
Данные события можно отслеживать на любом элементе страницы. При срабатывании события в обработчик передается объект событие, который содержит некоторую информацию, к примеру, такие как координаты прикосновения на станице. Для того чтобы использовать обработчики события для элементов, необходимо использовать метод addEventListener().
Стоит отметить:
- В каждом обработчике событий надо воспользоваться методом
event.preventDefault() , это нужно для того чтобы исключить возникновение стандартных реакций на действия курсора мыши со стороны браузера.
- Стоит обратить внимание на то, что событие touchend продолжает срабатывать, даже если вы увели курсор за пределы блока. Эту особенность так же следует учитывать при разработке.
Объекты, возникающие во время прикосновения к сенсору.
Объект Event может возникать не только при работе с сенсором, но и при других событиях, скажем, это может быть событие onclick, onkeypress, либо что-то в этом роде. При возникновении событий связанный с сенсором, объект будет содержать уникальные свойства, которые содержат подробную информацию о событии прикосновения к сенсору, и другую информацию об этом.
| Свойство | Описание свойства |
|---|
| altkey | Значение логического типа, указывает на то, была ли нажата клавиша alt во время возникновения события на сенсоре. |
| changedTouches | Список объектов которые были задействованы на момент действия прикосновения к сенсору:
- В touchstart, он содержит список пальцев, которые вступили в контакт с сенсорной поверхностью во время этого события touchstart.
- В touchmove, он содержит список пальцев, которые перешли во время этого события touchmove.
- В touchend, он содержит список пальцев, которые только что были удалены с сенсорной поверхности во время этого события touchend.
- В touchenter, он содержит список пальцев, которые вошли сенсорной поверхности во время этого события touchend.
- В touchend, он содержит список пальцев, которые вышли из сенсорной поверхности во время этого события touchmove
Вы можете использовать свойство lenght, чтобы получить количество объектов касания внутри changedTouches[] |
| ctrlKey | Логическое значение, указывающее, была ли нажата клавиша Ctrl во время сенсорного события. |
| metaKey | Логическое значение, указывающее, была ли нажата клавиша Meta в момент касания события. Клавиша Meta — специальная клавиша на клавиатурах MIT, Happy Hacking и Sun Microsystems. Обозначается сплошным ромбом. |
| shiftKey | Логическое значение, указывающее, была ли нажата клавиша shift во время сенсорного события. |
| targetTouches | Список точек соприкосновения, которые происходят в настоящее время с сенсорной поверхностью, и находятся на том же элементе от момента возникновения события.
Например, предположим, что вы свяжете событие touchstart к DIV и поместите два пальца вниз на поверхности. targetTouches будет содержать только информацию о пальце(цах), расположенном внутри DIV, а не тех что находятся извне.
Вы можете использовать свойство lenght, чтобы получить количество объектов касания внутри targetTouches[]. |
| touches | Список объектов, представляющих все касания точек соприкосновения в настоящее время в контакте с сенсорной поверхностью, независимо от того, на каких элементах сенсорной поверхности находятся точки соприкосновения на данный момент. |
| type | Тип события, которое вызвало объект Event, скажем, это может быть touchstart, touchmove и т.д. |
| target | Целевой элемент, связанный с этим событием |
Три свойства объекта changedTouches, targetTouches и touches могут содержать информацию о всех объектах соприкосновения с сенсором.
Именно через сенсорный объект можно получить подробную информацию о конкретной точке соприкосновения, такую как координаты на экране, его уникальный идентификатор, чтобы помочь определить, какие точки соприкосновения есть, и так далее.
Свойства сенсорного объекта
| Свойство | Описание |
|---|
| identifier | Номерация объекта соприкосновения, каждый объект на сенсоре экрана принимает свой уникльный порядковый номер. Начинается значение с 0, и далее по порядку. Сохраняется значение для каждой точки соприкосновения до того момента, пока палец пользователя не снимается с поверхности. |
| screenX | Х координата точки касания относительно левого края экрана пользователя. |
| screenY | Y координаты точки касания по отношению к верхнему краю экрана пользователя. |
| clientX | Х координата точки касания относительно левого края окна просмотра, не включая смещения прокрутки. |
| clientY | Y координаты точки касания по отношению к верхнему краю окна просмотра, не включая смещения прокрутки. |
| pageX | Х координата точки касания относительно левого края окна просмотра, в том числе смещения прокрутки. |
| pageY | Y координаты точки касания по отношению к верхнему краю окна просмотра, в том числе смещения прокрутки. |
| radiusX | Радиус эллипса, который наиболее близко определяет сенсорную область (например, палец, стилус) вдоль оси х. |
| radiusY | Радиус эллипса, который наиболее близко определяет сенсорную область (например, палец, стилус) вдоль оси y. |
| rotationAngle | Угол (в градусах), эллипс описывается в radiusX и radiusY при повороте по часовой стрелке вокруг центра. |
| force | Возвращает силу точки касания в виде целого числа от 0 до 1, где 0 нет силы, которая была определена устройством, и 1, максимальное значение. |
| target | Целевой элемент точки соприкосновения, может отличаться от элемента на который размещалось событие.
document.body.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0]
console.log(this.tagName) // возврат BODY
console.log(touchobj.target) // возвращает целевой элемент
}, false)
|
При работе со свойствами наиболее часто вам придется работать с координатами точек соприкосновения. Немного математики, и можно узнать в каком направлении производится движение объектов, и с какой скоростью.
Пример 1
Здесь можно посмотреть пример использования событий touchmove и touchend, чтобы показать расстояние, пройденное в момент воздействия на сенсор от начала и до конца в блоке div.
В данном примере так же добавлена эмуляция курсора мыши, для устройств без сенсора. Чтобы увидеть реакцию скрипта, на странице примера следует провести курсором по блоку.
Исходники примеров можно взять из архива.
Показать исходный код примера
Скрыть исходный код примера
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>События сенсорных экранов. Пример 1</title>
</head><body>
<p>В данном примере так же добавленная симуляция для курсора мыши, для устройств без сенсора.</p>
<style>
.box { width: 250px; height: 150px; padding: 10px;
border: 1px solid orange; background:l ightyellow;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.track { width: 480px; height: 55px;
position: relative; overflow: hidden; }
.track:after { content: '';
display: block; width: 100%; height: 1px;
background: black; position: absolute;
top: 49%; z-index: -1; }
</style>
<div class="box" id="box1"><h3>Прикоснитесь сюда!</h3></div>
<h3 id="statusdiv">Статус</h3>
<script>
function isContained(m, e) {
var e=e||window.event;
var c=/(click)|(mousedown)|(mouseup)/i.test(e.type)? e.target : ( e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) );
while (c && c!=m)try {c=c.parentNode} catch(e) { c=m; }
if (c==m) return true;
else return false;
}
window.addEventListener('load', function() { // после загрузки страницы
var box1 = document.getElementById('box1');
var statusdiv = document.getElementById('statusdiv');
var startx = 0; // стартовая точка соприкосновения по x
var dist = 0; // расстояние перемещения точки
var detecttouch = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) ||
!!window.ontouchstart || !!window.Touch || !!window.onmsgesturechange ||
(window.DocumentTouch && window.document instanceof window.DocumentTouch);
var ismousedown = false;
box1.addEventListener('touchstart', function(e) {
var touchobj = e.changedTouches[0]; // первая точка соприкосновения
startx = parseInt(touchobj.clientX); // положение точки касания по x относительно левой части браузера
statusdiv.innerHTML = 'Событие: touchstart<br /> ClientX: ' + startx + 'px';
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}, false);
box1.addEventListener('touchmove', function(e) {
var touchobj = e.changedTouches[0]; // первая точка соприкосновения
var dist = parseInt(touchobj.clientX) - startx; // подсчет расстояния перемещения
statusdiv.innerHTML = 'Событие: touchmove<br /> Гориз. перемещение: ' + dist + 'px';
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}, false);
box1.addEventListener('touchend', function(e) {
var touchobj = e.changedTouches[0]; // первая точка соприкосновения
statusdiv.innerHTML = 'Событие: touchend<br /> Координаты точки x: ' + touchobj.clientX + 'px';
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}, false);
if (!detecttouch) { // Устройство без сенсора
document.body.addEventListener('mousedown', function(e){
if ( isContained(box1, e) ) {
var touchobj = e;
ismousedown = true;
startx = parseInt(touchobj.clientX); // положение точки касания по x относительно левой части браузера
statusdiv.innerHTML = 'Событие: touchstart<br /> ClientX: ' + startx + 'px';
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}
}, false);
document.body.addEventListener('mousemove', function(e) {
if (ismousedown) {
var touchobj = e; // первая точка соприкосновения
var dist = parseInt(touchobj.clientX) - startx; // подсчет расстояния перемещения
statusdiv.innerHTML = 'Событие: touchmove<br /> Гориз. перемещение: ' + dist + 'px';
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}
}, false);
document.body.addEventListener('mouseup', function(e) {
var touchobj = e; // первая точка соприкосновения
ismousedown = false;
statusdiv.innerHTML = 'Событие: touchend<br /> Координаты точки x: ' + touchobj.clientX + 'px';
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}, false);
}
}, false);
</script>
</body></html>
Скрыть исходный код примера
Пример 2
Здесь рассмотривается пример перемещения элементов (блока DIV) посредством сенсора. Реализовать это дело не сложно, можно сделать так, чтобы блок перемещался по горизонтали или по вертикали, не столь важно направление, сколько возможность реализовать это.
Пример работы скрипта демонстрирующего перемещение блока по горизонтали (для устройств без сенсора в примере добавлена поддержка обычных курсоров мыши) можно увидеть здесь, а исходники примеров взять из архива.
Показать исходный код примера
Скрыть исходный код примера
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>События сенсорных экранов. Пример 2. Перемещение объектов.</title>
<script>
function isContained(m, e) {
var e=e||window.event;
var c=/(click)|(mousedown)|(mouseup)/i.test(e.type)? e.target : ( e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) );
while (c && c!=m)try {c=c.parentNode} catch(e) { c=m; }
if (c==m) return true;
else return false;
}
window.addEventListener('load', function() { // после загрузки страницы
var box2 = document.getElementById('box2'),
detecttouch = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) ||
!!window.ontouchstart || !!window.Touch || !!window.onmsgesturechange ||
(window.DocumentTouch && window.document instanceof window.DocumentTouch),
boxleft, // положение блока по левой стороне
startx, // стартовая точка соприкосновения по x
dist = 0, // расстояние перемещения точки
touchobj = null, // содержимое объекта перемещения
ismousedown = false;
box2.addEventListener('touchstart', function(e) {
touchobj = e.changedTouches[0]; // первая точка соприкосновения для этого события
boxleft = parseInt(box2.style.left); // положение блока по левой стороне
startx = parseInt(touchobj.clientX); // получение координаты по x точки соприкосновения
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}, false);
box2.addEventListener('touchmove', function(e) {
touchobj = e.changedTouches[0]; // первая точка соприкосновения для этого события
var dist = parseInt(touchobj.clientX) - startx; // подсчет расстояния перемещения
// перемещение блока от старновой позиции + дистанция
// выставляем лимит, чтобы блок не выходил за пределы от 0 до 380
box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + 'px';
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}, false);
if (!detecttouch) { // Устройство без сенсора
document.body.addEventListener('mousedown', function(e) {
if ( isContained(box2, e) ) {
touchobj = e; // первая точка соприкосновения для этого события
boxleft = parseInt(box2.style.left); // положение блока по левой стороне
startx = parseInt(touchobj.clientX); // получение координаты по x точки соприкосновения
ismousedown = true;
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}
}, false);
document.body.addEventListener('mousemove', function(e) {
if (ismousedown) {
touchobj = e; // первая точка соприкосновения для этого события
var dist = parseInt(touchobj.clientX) - startx; // подсчет расстояния перемещения
// перемещение блока от старновой позиции + дистанция
// выставляем лимит, чтобы блок не выходил за пределы от 0 до 380
box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + 'px';
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}
}, false);
document.body.addEventListener('mouseup', function(e) {
if (ismousedown) {
touchobj = e; // первая точка соприкосновения
boxleft = parseInt(box2.style.left); // положение блока по левой стороне
startx = parseInt(touchobj.clientX); // получение координаты по x точки соприкосновения
ismousedown = false;
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}
}, false);
}
}, false);
</script>
<style>
#box2 { width: 100px; height: 50px; font-size:1.4em;
border: 1px solid orange; background: lightyellow;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute; padding-top: 10px;
-moz-box-shadow: 0 0 5px gray; box-shadow: 0 0 5px gray;
text-align: center; line-height: 1; cursor:pointer }
.track { width: 480px; height: 55px;
position: relative; overflow: hidden; }
.track:after { content: '';
display: block; width: 100%; height: 1px;
background: black; position: absolute;
top: 49%; z-index: -1; }
</style>
</head><body>
<b>События сенсорных экранов. Пример 2. Перемещение объектов.</b>
<p>В данном примере так же добавленная симуляция для курсора мыши, для устройств без сенсора.</p>
<div class="track" id="track">
<div style="left: 0px; top: 0px;" id="box2" class="box">Поехали!</div>
</div>
</body></html>
Скрыть исходный код примера
Пример 3
В этом примере определяется события прикосновения к сенсору, а так же одновременный “размах” пальцем на сенсоре (команда «swipe»).
В качестве правила, давайте уточним, какое движение по сенсорной поверхности мы будем рассматривать в качестве команды «swipe». В этом действии будут причастны две переменные, это расстояние, проходимое пальцем по оси x или y, от момента возникновения события touchstart до момента touchend, а так же время, которое потребовалось для этого действия. Используя эти данные, мы можем решить, производил ли пользователь действие, о котором мы говорим, либо нет.
Методом пробы, мы можем определить среднее значение, которое проходит палец по сенсору для этого действия по горизонтали и вертикали. Что касается перемещения пальца по горизонтали, то значения расстояния примерно одинаковы, однако при перемещении с лева на право, скорость значительно выше, примерно на 200 мс. Что касается вертикали, здесь перемещение пальца по сенсору рекомендуется определять при условии не более 100px, чтобы не мешать другим командам, вследствие чего при этом могут быть проблемы с ложным срабатыванием.
Пример определения команды «swipe» от левой стороны в правую (Для устройств, не оснащенных сенсором, так же в примере реализован симулятор для обычной компьютерной мыши).
Показать исходный код примера
Скрыть исходный код примера
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>События сенсорных экранов. Пример 3. Команда swipe</title>
</head><body>
<style>
#touchsurface { width: 300px; height: 300px; padding: 10px;
font-size: 24px; line-height: 1.1em;
background: lightyellow; border: 1px solid orange; }
</style>
<script>
function isContained(m, e) {
var e=e||window.event;
var c=/(click)|(mousedown)|(mouseup)/i.test(e.type)? e.target : ( e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) );
while (c && c!=m)try {c=c.parentNode} catch(e) { c=m; }
if (c==m) return true;
else return false;
}
window.addEventListener('load', function() {
var touchsurface = document.getElementById('touchsurface'),
detecttouch = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) ||
!!window.ontouchstart || !!window.Touch || !!window.onmsgesturechange ||
(window.DocumentTouch && window.document instanceof window.DocumentTouch),
startX,
startY,
dist,
threshold = 150, // минимальное расстояние для swipe
allowedTime = 200, // максимальное время прохождения установленного расстояния
elapsedTime,
startTime,
ismousedown = false;
function handleswipe(isrightswipe) {
if (isrightswipe) touchsurface.innerHTML = 'Вы пролистнули <span style="color:red">в правую сторону!</span>';
else { touchsurface.innerHTML = 'Пролистывания в правую сторону не обнаружено'; }
}
touchsurface.addEventListener('touchstart', function(e) {
touchsurface.innerHTML = '';
var touchobj = e.changedTouches[0];
dist = 0;
startX = touchobj.pageX;
startY = touchobj.pageY;
startTime = new Date().getTime(); // время контакта с поверхностью сенсора
e.preventDefault();
}, false);
touchsurface.addEventListener('touchmove', function(e) {
e.preventDefault(); // отключаем стандартную реакцию скроллинга
}, false);
touchsurface.addEventListener('touchend', function(e) {
var touchobj = e.changedTouches[0];
dist = touchobj.pageX - startX; // получаем пройденную дистанцию
elapsedTime = new Date().getTime() - startTime; // узнаем пройденное время
// проверяем затраченное время,горизонтальное перемещение >= threshold, и вертикальное перемещение <= 100
var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100);
handleswipe(swiperightBol);
e.preventDefault(); // отключаем реакцию элементов по умолчанию в браузере
}, false);
if (!detecttouch) { // Устройство без сенсора
document.body.addEventListener('mousedown', function(e) {
if ( isContained(touchsurface, e) ){
touchsurface.innerHTML = '';
var touchobj = e;
dist = 0;
startX = touchobj.pageX;
startY = touchobj.pageY;
startTime = new Date().getTime(); // время контакта с поверхностью сенсора
ismousedown = true;
e.preventDefault();
}
}, false);
document.body.addEventListener('mousemove', function(e) {
e.preventDefault(); // отключаем стандартную реакцию скроллинга
}, false);
document.body.addEventListener('mouseup', function(e) {
if (ismousedown) {
var touchobj = e;
dist = touchobj.pageX - startX; // получаем пройденную дистанцию
elapsedTime = new Date().getTime() - startTime; // узнаем пройденное время
// проверяем затраченное время,горизонтальное перемещение >= threshold, и вертикальное перемещение <= 100
var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100);
handleswipe(swiperightBol);
ismousedown = false;
e.preventDefault();
}
}, false);
}
}, false);
</script>
<p>В данном примере добавлена симуляция для курсора мыши, для устройств без сенсора.</p>
<div id="touchsurface">Пролестните в правую сторону.</div>
</body></html>
Скрыть исходный код примера
По событию touchend мы проверяем, что расстояние, за которое прошел указатель на сенсоре от момента события touchstart до touchend является положительным числом, выше заданного порога значения, в нашем случае это 150. В то же время, мы отсеиваем возможное вертикальное движение менее 100px. Так как вертикальное перемещение курсора может быть выше начальной точки или ниже, мы используем Math.abs().
Пример 4
В примере выше мы рассмотрели определение команды swipe на сенсорных устройствах в направлении правой стороны. Кроме этого можно определять направление курсора на все 4 стороны (вправо, влево, вверх и вниз).
Пример определения команды «swipe» в любом направлении (для устройств, не оснащенных сенсором, в примере реализована поддержка обычного курсора мыши).
Показать исходный код примера
Скрыть исходный код примера
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>События сенсорных экранов. Пример 4. Команда swipe</title>
</head><body>
<style>
#touchsurface2 { width: 300px; height: 300px;
border: 1px solid orange;
background: lightyellow url(arrows.png) center center no-repeat; }
#touchsurface2 #inner { width: 100%; height: 100%; }
</style>
<script>
function isContained(m, e) {
var e=e||window.event;
var c=/(click)|(mousedown)|(mouseup)/i.test(e.type)? e.target : ( e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) );
while (c && c!=m)try {c=c.parentNode} catch(e) { c=m; }
if (c==m) return true;
else return false;
}
function swipedetect(el, callback) {
var touchsurface = el,
swipedir,
startX,
startY,
distX,
distY,
threshold = 150,
restraint = 100,
allowedTime = 300,
elapsedTime,
startTime,
ismousedown = false,
detecttouch = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) ||
!!window.ontouchstart || !!window.Touch || !!window.onmsgesturechange ||
(window.DocumentTouch && window.document instanceof window.DocumentTouch),
handleswipe = callback || function(swipedir){};
touchsurface.addEventListener('touchstart', function(e) {
var touchobj = e.changedTouches[0];
swipedir = 'none';
dist = 0;
startX = touchobj.pageX;
startY = touchobj.pageY;
startTime = new Date().getTime(); // время контакта с поверхностью сенсора
e.preventDefault();
}, false);
touchsurface.addEventListener('touchmove', function(e) {
e.preventDefault(); // отключаем стандартную реакцию скроллинга
}, false);
touchsurface.addEventListener('touchend', function(e) {
var touchobj = e.changedTouches[0];
distX = touchobj.pageX - startX; // получаем пройденную горизонтальную дистанцию
distY = touchobj.pageY - startY; // получаем пройденную вертикальную дистанцию
elapsedTime = new Date().getTime() - startTime; // узнаем пройденное время
if (elapsedTime <= allowedTime) { // first condition for swipe met
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)
{ swipedir = (distX < 0)? 'left' : 'right'; } // 2-е условие для horizontal swipe met
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint)
{ swipedir = (distY < 0)? 'up' : 'down'; } // 2-е условие для vertical swipe met
}
// проверяем затраченное время,горизонтальное перемещение >= threshold, и вертикальное перемещение <= 100
handleswipe(swipedir);
e.preventDefault();
}, false);
if (!detecttouch) { // Устройство без сенсора
document.body.addEventListener('mousedown', function(e) {
if ( isContained(touchsurface, e) ) {
var touchobj = e;
swipedir = 'none';
dist = 0;
startX = touchobj.pageX;
startY = touchobj.pageY;
startTime = new Date().getTime(); // время контакта с поверхностью сенсора
ismousedown = true;
e.preventDefault();
}
}, false);
document.body.addEventListener('mousemove', function(e) {
e.preventDefault(); // отключаем стандартную реакцию скроллинга
}, false);
document.body.addEventListener('mouseup', function(e) {
if (ismousedown) {
var touchobj = e;
distX = touchobj.pageX - startX; // получаем пройденную горизонтальную дистанцию
distY = touchobj.pageY - startY; // получаем пройденную вертикальную дистанцию
elapsedTime = new Date().getTime() - startTime; // узнаем пройденное время
if (elapsedTime <= allowedTime) { // Первое условие для swipe met
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)
{ swipedir = (distX < 0)? 'left' : 'right'; } // 2-е условие для horizontal swipe met
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint)
{ swipedir = (distY < 0)? 'up' : 'down'; } // 2-е условие для vertical swipe met
}
// проверяем затраченное время,горизонтальное перемещение >= threshold, и вертикальное перемещение <= 100
handleswipe(swipedir);
ismousedown = false;
e.preventDefault();
}
}, false);
}
}
window.addEventListener('load', function() {
var el = document.getElementById('touchsurface2');
var inner = document.getElementById('inner');
var hidetimer = null;
swipedetect(el, function(swipedir) {
if (swipedir != 'none') {
clearTimeout(hidetimer);
var bgimage = swipedir + 'arrow.png'; // префиксы для имен, прим. "leftarrow.png", "uparrow.png" и т.д.
inner.style.background = 'transparent url(' + bgimage + ') center center no-repeat';
hidetimer = setTimeout(function() { inner.style.background = ''; }, 1000); //// вернуть фон через 1 сек.
}
});
}, false);
</script>
<p>Для устройств, не оснащенных сенсором, в данном примере так же добавлена поддержка устройств с мышью.</p>
<div id="touchsurface2">
<div id="inner">Проведите пальцем</div>
</div>
</body></html>
Скрыть исходный код примера
Мы связываем функцию swipedetect() для блока с id #touchsurface2, при возникновении действия «swipe» производиться смена фонового изображения блока div, таким образом, показывая направление движения пальца.