Чтобы обеспечить надежную поддержку сенсорных интерфейсов, события касания предоставляют возможность реагировать на действия пользователя на сенсорном экране или сенсорной панели.
интерфейс TouchEventTouchEvent — это тип события, описывающий изменение состояния пальцев на сенсорной поверхности (сенсорном экране, сенсорной панели и т. д.). Событие этого типа используется для описания одной или нескольких точек касания, позволяя разработчикам обнаруживать перемещение точек касания, увеличение и уменьшение количества точек касания и т. д. Каждый объект Touch представляет собой точку касания; каждая точка касания описывается своим положением, размером, формой, уровнем давления и целевым элементом. Объект TouchList представляет список нескольких точек касания.
Тип события касанияЧтобы различать изменения состояния, связанные с касанием, существует несколько типов событий касания. Вы можете определить тип текущего события, проверив свойство TouchEvent.type события касания.
Основной принцип заключается в записи координат начального скольжения (touchStart) и конечного скольжения (touchEnd), а затем вычисления относительного положения.
touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; e = e || window.event; это; endX = e.changedTouches[0].pageX endY = e.changedTouches[0].pageY; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = this; let Direction = that.GetSlideDirection(startX, startY, endX, endY switch); (направление) { случай 0: console.log (без скользящего разрыва); случай 1: console.log (вверх); случай 2: console.log (вниз); 3: console.log(left); случай 4: console.log(right);break;default:break } },//Направление возврата 1: вверх, 2: вниз, 3 в зависимости от начальной точки и конца. точка: Влево, 4: Вправо, 0: Не скользить GetSlideDirection: function (startX, startY, endX, endY) { const that = this; let dy = startY - endY; let dx = endX - startX; 0; // Если расстояние скольжения слишком короткое if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } let angular = that.GetSlideAngle(dx, dy); угол > = -45 && угол < 45) { результат = 4 } else if (угол >= 45 && угол < 135) { result = 1 } else if (угол >= -135 && угол < -45) { результат = 2; } else if ((угол >= 135 && угол <= 180) || (угол >= -180 && угол < -135)) { result = 3 } return; result }, // Возвращаем угол GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI }; Собственный метод JSВ дополнение к новым методам в H5 вы также можете использовать собственный JS для определения направления скольжения представления. Код выглядит следующим образом (может запускаться напрямую):
Следует отметить, что Chrome всегда устанавливает для document.body.scrollTop значение 0, и его необходимо изменить на document.documentElement.scrollTop.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { border: 1px сплошной черный; ширина: 200 пикселей высота; : 100 пикселей; переполнение: прокрутка } </style></head><body style=overflow: прокрутка><h1>Привет; слово</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1> <h1>Привет</h1><h1>Привет</h1><h1>Привет</h1><h1>Привет слово</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1> <h1>Привет</h1><h1>Привет</h1><h1>Привет</h1><h1>Привет слово</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1> <h1>Привет</h1><h1>Привет</h1><h1>Привет</h1><h1>Привет слово</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1> <h1>Привет</h1><h1>Привет</h1><h1>Привет</h1><h1>Привет слово</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1> <h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><h1>Слово ПРИВЕТ</h1><script> Функция прокрутка ( fn ) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn || function() {}; console.log('beforeScrollTop',beforeScrollTop); window.addEventListener(scroll, function() { var afterScrollTop = document); .documentElement.scrollTop, delta = afterScrollTop - beforeScrollTop; console.log('beforeScrollTop',beforeScrollTop); console.log('afterScrollTop',afterScrollTop); if(delta === 0) return false; fn(delta > 0 ? down: up); beforeScrollTop = afterScrollTop }, false); } прокрутка(функция(направление) { console.log(направление) });</script></body></html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.