В основном вы хотите определить, что такое смахивание, а что - щелчок.
Мы можем установить некоторые условия:
- Смахивание - это прикосновение к точке
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);
// Саймон А.
person
Netlight_Digital_Media
schedule
20.02.2012
