Что вы в основном хотите сделать, это определить, что такое свайп и что такое щелчок.
Мы можем установить некоторые условия:
- Проведите, когда вы касаетесь в точке
p1, затем переместите палец в точку p2, продолжая удерживать палец на экране, затем отпустите. - Щелчок - это нажатие, когда вы начинаете касание и заканчиваете касание того же элемента.
Итак, если вы храните координаты того, где произошла ваша touchStart, вы можете измерить разницу в touchEnd.Если изменение достаточно велико, считайте его проведением, в противном случае считайте его щелчком.
Кроме того, если вы хотите сделать его действительно аккуратным, вы также можете определить, какой элемент «зависает» с помощьюпальцем во время touchMove, и если вы все еще не находитесь в элементе, с которого вы начали щелчок, вы можете запустить метод clickCancel, который удаляет блики и т. д.
// grab an element which you can click just as an example
var clickable = document.getElementById("clickableItem"),
// set up some variables that we need for later
currentElement,
clickedElement;
// set up touchStart event handler
var onTouchStart = function(e) {
// store which element we're currently clicking on
clickedElement = this;
// listen to when the user moves finger
this.addEventListener("touchMove" onTouchMove);
// add listener to when touch end occurs
this.addEventListener("touchEnd", onTouchEnd);
};
// when the user swipes, update element positions to swipe
var onTouchMove = function(e) {
// ... do your scrolling here
// store current element
currentElement = document.elementFromPoint(x, y);
// if the current element is no longer the same as we clicked from the beginning, remove highlight
if(clickedElement !== currentElement) {
removeHighlight(clickedElement);
}
};
// this is what is executed when the user stops the movement
var onTouchEnd = function(e) {
if(clickedElement === currentElement) {
removeHighlight(clickedElement);
// .... execute click action
}
// clean up event listeners
this.removeEventListener("touchMove" onTouchMove);
this.removeEventListener("touchEnd", onTouchEnd);
};
function addHighlight(element) {
element.className = "highlighted";
}
function removeHighlight(element) {
element.className = "";
}
clickable.addEventListener("touchStart", onTouchStart);
Затем выВы также должны добавить слушателей к элементу с возможностью прокрутки, но там вам не придется беспокоиться о том, что произойдет, если палец переместится между touchStart и touchEnd.
var scrollable = document.getElementById("scrollableItem");
// set up touchStart event handler
var onTouchStartScrollable = function(e) {
// listen to when the user moves finger
this.addEventListener("touchMove" onTouchMoveScrollable);
// add listener to when touch end occurs
this.addEventListener("touchEnd", onTouchEndScrollable);
};
// when the user swipes, update element positions to swipe
var onTouchMoveScrollable = function(e) {
// ... do your scrolling here
};
// this is what is executed when the user stops the movement
var onTouchEndScrollable = function(e) {
// clean up event listeners
this.removeEventListener("touchMove" onTouchMoveScrollable);
this.removeEventListener("touchEnd", onTouchEndScrollable);
};
scrollable.addEventListener("touchStart", onTouchStartScrollable);
// Саймон А.