≡× MENU

• Windows 10
• Internet, WiFi
• Useful
• Windows 7
• Mistakes

Page scrolling by swiping the screen. What is gestura, tap, touch, flick, swipe, slide, pinch, stretch, pan: for smartphone and iPhone. Gestures with two fingers

Android devices use a touch screen. For users who are accustomed to push-button controls, it can be difficult to switch to touch screen operation.

Button control uses a keyboard and mouse, while touch screen control is performed using fingers or a stylus.

On the one hand, gesture control seems a little primitive. On the other hand, Android gestures open up new horizons for various programs that would be very difficult or impossible to implement in a button version.

Touch screen control is that it responds to touch with fingers or a stylus, and, if necessary, repeats exactly these movements. If the device recognizes touches or movements as commands, then they are executed exactly as commands. The task of the user is simple - to master pressing the touch screen so that they lead to the execution of those commands that will be understandable to the device and that the user needs.

Let's take a look at the top seven techniques used on touch screens. Android gestures can be the following:

1. Touch (press)

Tapping (or tapping) is the primary action most commonly used on a touch screen.

Touch is necessary in many cases:

• to enable features,
• to launch any application,
• activation of one or another parameter, element,
• to select the desired icon or the corresponding option in the list,
• to enter text
• etc.

Touching is simple. It is easy enough to touch with your finger or stylus in the required place on the screen, for example, touch the icon of the desired application.

To enter text, just touch the desired field, a virtual keyboard will automatically appear, you can type text by touching the keys with the desired characters.

I involuntarily remember how many years ago I went to the terminal, pressed the buttons of the terminal to put money on my mobile phone. In general, I did everything as usual, but nothing happened on the terminal, the terminal did not respond to the buttons. So I did 3 or 4 approaches to the terminal on different days with zero results. On some good day, a young man who was standing in line at the terminal behind me said: “What if you press your finger on the screen?”. And here it is, happiness: I pressed my finger on the screen and the terminal began to respond to pressing, everything worked out. So I first met with a touch screen.

2. Double tap

Double-tap (or double-tap) is used for quick zoom, to launch some applications and other actions.

To change the scale, for example, when viewing a web page, you need to quickly touch the screen 2 times with a minimum interval. To return to the previous state, you must again double-tap the screen.

One double-tap turns on the corresponding option, a second double-tap cancels the same option.

If you compare Android with Windows, then double-tap in Android is somewhat similar to double-clicking the left button in Windows.

3. Touch and hold

Pressing (touching) with holding is used to open additional options, if any.

You need to touch the desired area on the screen and hold your finger for a few seconds. At the moment of touching and holding, nothing happens, and this may be somewhat surprising at first. But as soon as you release your finger, an additional menu will immediately appear or another action will occur as a result of a touch and hold.

This action is very similar to right-clicking in Windows, when after right-clicking on an object, a so-called context menu appears with additional options for the object.

4. Swipe (swipe)

Swiping can also be called swiping or scrolling. Lightly touching the screen, without releasing your finger, slide your finger from top to bottom, from bottom to top, from left to right, or from right to left, that is, as if to brush off the “dust from the screen” slightly in the right direction.

Swiping (swiping) is used to switch between pages on the Desktop, to scroll through various lists, etc. Depending on the Android lock screen setting, it may be that swiping diagonally (diagonally) means unlocking the screen - this swiping also applies, and not just swiping from bottom to top or right to left.

When I first needed to send a message in Russian on my smartphone, for this I had to change the layout from English to Russian on the virtual keyboard. I tried all the options, even went into the language settings - it didn’t work out in any way: the English layout “stood in its tracks”. I was told that I just need to lightly wave my finger over the space from left to right. By the way, I saw the inscription "English" on the space bar on the virtual keyboard, I pressed it, but to no avail. And as soon as she waved her finger over the space, the layout immediately changed to Russian. Here it is swiping, it works!

5. Drag and drop (drag and drop)

Dragging (or dragging) is required to move apps around on the screen, as well as to move folders, icons, and the like.

It is necessary to touch the required element, wait for it to be selected, then, without releasing your finger, move this element (folder, file, icon, etc.) to the desired point on the touch screen.

6. Bringing and spreading fingers

A simple and useful function to change the scale of what is displayed on the screen: picture, text, map, diagram, etc. You can zoom in and out again if needed.

To do this, you need to touch the screen with two fingers (or several) at once and, without taking your fingers off the screen, spread them apart. The scale will increase proportionally.

If you touch the screen with two fingers (or several) and, without lifting them off the screen, bring them together, then the scale will decrease.

7. Change screen orientation

Portrait (vertical) orientation is convenient for reading books. Landscape (horizontal) orientation is good for watching videos and various maps. All this, of course, is not for everyone, everyone chooses for himself which orientation is better in this or that case.

To change the orientation from one to another, you just need to turn your smartphone. In this case, the Screen rotation function must be activated in the screen parameters. If the function is disabled, then the image will not be rotated.

These are not all possible gesture options, but perhaps the most basic and frequently used ones. Other gestures, such as turning in a circle, etc. are used less often, and these gestures may not work in every program. As a rule, the listed gestures are enough for all occasions, or almost everything.

They are mastered easily and quickly, but first you need to practice a little. Gestures are logically clear, you expect exactly this action from them. Is that touch with hold - it's a little unnatural. The rest of the gestures are intuitive. That's why it's easy to remember.

P.S. Check out other content:

Get up-to-date articles on computer literacy directly to your inbox.
Already more 3.000 subscribers

.

Dear friends who are starting to master the smartphone!

If you have switched from a conventional push-button mobile phone to a touch screen smartphone (touch screen - touchscreen), then some of you initially experience difficulties with the development of the touch screen. It is not very clear to you how to touch the screen, how long to hold the touch, how to navigate the page, etc. In this article I will try to briefly describe the main features smartphone control.

I must say right away that the transition from mechanical buttons to virtual ones is a huge step forward in the development of mobile devices. It allows you to increase the screen area to almost the entire front surface of the smartphone and make it easier to manage. But at the same time, at first, there is also some inconvenience. Ordinary phone you could take it in your hand as you like and touch any part of the front panel and screen. With smartphones, you need to be more careful, because any accidental touch on the surface of the screen can cause an unwanted action. You need to develop the habit of holding a smartphone in your hand without touching the screen unnecessarily, at least while it is in an unlocked state.

So, here basic management techniques touch screen:

Single touch (tap)

This rapid(almost no delay) touching the screen with one finger. The delay should not exceed 0.5 seconds. Any touch is easy enough to do, as today's capacitive touch screens are very sensitive (unlike the resistive ones that have gone by the wayside).

On the home screen (and any desktop screen), a single tap on an application icon launches the application. This analogue of pressing the left button mice on a regular computer. In other cases, inside the application, this can be choosing from several options, choosing a contact in the contact list, confirming an action, etc.

A single touch in text fields inserts the cursor at the touched location.

Long tap

This touch with one finger With delay more than 1 second (until the result appears). The result may vary depending on the situation. In most cases, this action will result in a context menu ( analogue right button mice).

Delayed tapping of an icon on the main screen leads to “sticking” to the finger of this icon, which makes it possible to move it around the screen, including to the adjacent home screen, as well as deleting the icon (not the application itself) to the basket that appears on the screen.

In text fields, delay results in fragment selection text under the finger with the possibility of further expanding the selection with the resulting end marks, at the same time a menu appears Copy, Select All, Cut, Paste. Pausing on the cursor label causes the menu to appear Insert(last clipboard content), Paste from clipboard(any of the last 20 clipboard contents).

Double tap (double tap)

Double tap with one finger with a short interval between taps (no more than 0.2 sec). Used to alternately zoom in and out of a web page in a browser, an image in the Gallery, etc. You need to click exactly on the area of ​​the screen that you want to view larger and in more detail.

Touch with movement (tap & drag)

This touch with one finger with immediate (delay no more than 0.2 sec) start of movement finger across the screen without releasing your finger. A further delay in one place after the start of the movement does not play a role: the contents of the screen seem to stick to the finger until it is released. This is how you scroll through desktops (screens), pages in the browser in any direction, scroll through lists (for example, contacts), etc. This gesture also serves to move the sliders of various virtual controls (eg volume, brightness, etc.).

Swipe

This action with one finger is similar to the previous one, but it is done without a long movement around the screen, reminiscent of a quick brush stroke on paper. At the same time, the contents of the screen continue to move even after taking your finger off the screen in the process of “stroke” with a gradual slowdown. I remember the video of Steve Jobs' first demonstration of this effect at the Apple iPhone 2G launch in 2007 getting a round of applause.

Now let's look at touch techniques. two fingers. In this case, the fingers can be on one hand or on different ones, it does not matter.

Convergence (pinch) and breeding of two fingers (pinch, zoom)

This technique is used to smoothly decrease and, accordingly, increase the scale of the image on the screen (pictures, web pages). You put both fingers on the screen at almost the same time, and then make a movement to bring your fingers together (pinch) or spread them apart. The direction of movement of the fingers (right-left, up-down or intermediate movements) does not play a role.

Rotation with two fingers (rotate)

This is another technique used to rotate the image on the screen. After touching the screen, two fingers move each along a circular arc in the same direction (clockwise or counterclockwise). Or one finger stands motionless at the center of rotation, while the other moves in an arc around this center. This method is rarely used. For example, I used it when editing an image in the MDScan application to get scanned copies of documents.

Learn the meaning of new terms! Check out a quick glossary for owners of iPhones, smartphones and tablets.

Everyone knows:

Cry(click) - click on the mouse button, short press.

Double click, double click(double click) - two quick clicks on the mouse button.

Interface(interface) - how the device or application "communicates" with you.

Scrolling(scrolling) – screen scrolling.

Screenshot(screenshot) - a snapshot ("photo") of the screen.

Known to many:

Drag and drop, drag and drop(drag-and-drop) - "drag and drop" - press in one place, then move and release in another place.

Gestures, gestures(gestures) - different forms of movement of the mouse, finger or other pointing device. Can be programmed to perform certain actions. For example, moving your finger from top to bottom on the screen mobile device reloads the page.

Touchpad, touchpad(touch pad) - a field on the laptop keyboard for taps and finger gestures.

touchscreen(touch screen) - touch screen: perceives finger pressure. For example, the screen of a tablet or an ATM.

Simple motions for touch devices:

Tap, tap(tap) - a short press with a finger, akin to a click.

Double tap, double tap, double tap(double tap) - two short taps with your finger, akin to a double-click.

Long tap, Touch(touch) - pressing longer than Tap.

Touch and hold(touch and hold) - press and hold.

New motions for touch devices:

flick(flick) - click obliquely on the screen in the direction of the future movement of the screen image, after the flick the image continues to move by inertia.

Swipe(swipe) Slide(slide) - continuous sliding of the finger across the screen.

Pinch(pinch) - pinch, squeezing the movement of two fingers simultaneously on the screen to reduce the image.

Spread / Spread(spread), Stretch(stretch: for Microsoft), Pinch-it-open(pinch it open: for Apple) - stretching the screen with two fingers at the same time to enlarge the image.

Pan, pan(pan) - move your finger slowly across the screen to move and view the enlarged picture.

If something important is missing or you do not agree with the wording, write to us: This address Email protected from spambots. You must have JavaScript enabled to view.

When developing applications for Android and iPhone with iPad (IOS) using only web technologies, sooner or later each developer faces the question of implementing and using complex multi-touch actions in their game or application, such as swipe, pinch, as well as processing a long tap (long touch with one finger without moving) and drag "n" drop.

In this article, we will look at ways to process touch events of varying complexity on Javascript Events, without third-party libraries (we’ll just take jQuery min).

I’ll make a reservation right away that I will only use jQuery in order to disable the default behavior of the browser on the event. I don't like this library, so everything will be written in Vanilla JS.

So, let's start with the theory and actually touch on what events should be used when creating an application or game.

In total, 3 key events are used:

touch start- Touched the screen

touchend- Finger removed

touch move- move your finger

If to get the element on which the mouse drove in or moved out, it was enough to call event.target, then everything is not so simple with touch events.

Each touch must be identified. And for this, lists are used:

touches- All fingers that are currently interacting with the screen ("Touched" on the screen)

targetTouches- List of fingers that interact with the element

changedTouches- List of fingers that participate in the current event. If for example it is a touchend event, then the list will contain the finger that was removed (Even if the other 4 fingers are still on the screen).

To make it easier to understand, here's the situation:

I put one finger on the screen and all 3 lists have one element.

I put the second finger and now touches has 2 elements, targetTouches will have 2 elements if I put the second finger on the same HTML element as the first, and changedTouches in turn will only have the second finger, since it was he who triggered the event.

If I put 2 fingers on the screen at the same time, then changedTouches will have 2 elements (each per finger).

If I start moving my fingers across the screen, only the changedTouches list will change. The number of elements that it will contain will be equal to the number of fingers involved in the movement (at least 1).

If I remove my finger, then the lists touches, targetTouches will be one element empty, and changedTouches will contain the finger, since it triggered the event (touchend)

When I remove the last finger, the lists touches, targetTouches will contain nothing, and changedTouches will have information about this very finger.

Now is the time to find out exactly what information we can get about the finger:

identifier- Unique touch ID

target- The object itself to which we touched

PageX, PageY- Touch coordinates on the page

You can view the unique ID of a single touch by calling event.touches.identifier, and on IOS, if I'm not mistaken, you need to do this event.originalEvent.touches.identifier.

Well, what I have already taught you, and now it's time to move on to practice.

Before we get started, there are a few things you need to understand. In each game, application that you will make on Android and IOS, you must disable the standard reaction of the WebView component to events. To do this, we connected jQuery (I could not do on Pure JS what the functions do event.preventDefault() And event.stopPropagation()).

So you need to put the following in your JS code:

event.preventDefault();
event.stopPropagation();

), false);

event.preventDefault();
event.stopPropagation();
/* Here is your event handling code */
), false);

event.preventDefault();
event.stopPropagation();
/* Here is your event handling code */
), false);

This must be done, because many devices without it have significant brakes, glitches and jerky animation.

Distracted. We continue.

Let's describe all the basic touch interactions with the screen and elements, having the acquired knowledge.

Tap

This event is executed simply when we touch the screen with our finger and move it away.

var myclick=event.targetTouches; /*your code*/
}
), false);

For example in a variable myclick will contain your touch.

Long tap

Although infrequently, there are situations when in a mobile application or game you need to catch the action of a long touch on an object. Let's take a look at how to make a Javascript long touch for touch screens. mobile smartphones Well, of course, tablets.

Implementation 1:

var ldelay;
var betw=();
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
ldelay=new Date();
betw.x=event.changedTouches.pageX;
betw.y=event.changedTouches.pageY;
), false);
/*Catch finger release*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
if(event.changedTouches.pageX==betw.x &&
event.changedTouches.pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800)(
/*Here is your code*/
}
), false);

This is the first Javascript implementation of Long Tap. The logic is this: we catch the touch, measure the time of this event, catch the release, measure the release time, subtract the first time from the second and check if the position of the finger on the screen has changed. If more than 800 milliseconds have passed with the finger at the same place and time, we perform Long Tap actions.

Now let's look at the second implementation with slightly different logic:

Implementation 2:

varlttimer;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
), false);
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
clearTimeout(lttimer);
), false);
document.addEventListener("touchend", function(event) (
clearTimeout(lttimer);
), false);
function longTouch()(/*your code*/)

The above implementation of the Long Tap event in Javascript is more correct and is most often used in mobile applications. Its main difference from the previous implementation is that it does not wait for the finger to be released, and in the event that the finger did not move, it fires the Long Tap event, which you must put in the longTouch function. longTouch.

Swipe

It's time to talk about paging on the screen of a smartphone or tablet. Swipe - quite common in building in the first place mobile applications, so sooner or later every appbuilder has to deal with it.

If you don't want to bother and only need the Swipe functionality in the mobile app, you can read about it at the very bottom of the page.

If you are a hardcore developer - let's go!

Implementation 1:

var initialPoint;
var finalPoint;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
initialPoint=event.changedTouches;
), false);
document.addEventListener("touchend", function(event) (
event.preventDefault();
event.stopPropagation();
finalPoint=event.changedTouches;
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
if (xAbs > 20 || yAbs > 20) (
if (xAbs > yAbs) (
if (finalPoint.pageX< initialPoint.pageX){
/*SWIPE LEFT*/)
else(
/*SWIPE RIGHT*/)
}
else(
if (finalPoint.pageY< initialPoint.pageY){
/*SWIPE UP*/)
else(
/*SWIPE DOWN*/)
}
}
), false);

This is our first Javascript swipe implementation. The peculiarity of this implementation is that the event is counted as a swipe when you release the finger involved in the event. This swipe can be used in some tasks. Do not forget in this and many other examples to turn off the standard behavior of the browser on touch events (I wrote about this above), I usually do not write them in the examples given, but do not forget.

And now let's look at another - classic implementation, when swipe needs to be calculated in real time, for example, when turning the page:

var startPoint=();
var nowPoint;
var ldelay;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
startPoint.x=event.changedTouches.pageX;
startPoint.y=event.changedTouches.pageY;
ldelay=new Date();
), false);
/*Catch the movement with your finger*/
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
var otk=();

otk.x=nowPoint.pageX-startPoint.x;
/*Process data*/
/*For example*/
if(Math.abs(otk.x)>200)(
if(otk.x<0){/*СВАЙП ВЛЕВО(ПРЕД.СТРАНИЦА)*/}
if(otk.x>0)(/*SWIPE RIGHT(NEXT PAGE)*/)
startPoint=(x:nowPoint.pageX,y:nowPoint.pageY);
}
), false);
/*Catch finger release*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
nowPoint=event.changedTouches;
var xAbs = Math.abs(startPoint.x - nowPoint.pageX);
var yAbs = Math.abs(startPoint.y - nowPoint.pageY);
if ((xAbs > 20 || yAbs > 20) && (pdelay.getTime()-ldelay.getTime())<200) {
if (xAbs > yAbs) (
if (nowPoint.pageX< startPoint.x){/*СВАЙП ВЛЕВО*/}
else(/*SWIPE RIGHT*/)
}
else(
if (nowPoint.pageY< startPoint.y){/*СВАЙП ВВЕРХ*/}
else(/*SWIPE DOWN*/)
}
}
), false);

In this method, we went a slightly different way and partially used the principle of the first implementation. Logically, this is a slightly more complex swipe. Where /*Process Data*/ is commented out, you should use the coordinates of the swipe finger. For example, it can be an animation of turning the page, and the more left the finger, the more the page is turned. For example, we are in that part of the event listener touch move tracked only the x-coordinate, y - is screwed in a similar way. In a variable otk.x store the current position of the finger relative to the point where it first touched the eran. If the finger is to the left of this point, then the variable has a negative value, if to the right - a positive one.

For example, we set a condition there when the finger moves more than 200 pixels to the left or right of the touch point - we count the swipe. What is it for? For example, as soon as the user touches and starts moving his finger, you can show him a smooth page flipping, which follows his finger, and as soon as the finger goes beyond 200 pixels, it performs the final animation and the page flips. It's like one of possible way the use of such a swipe.

But why then the event touchend you ask ... Sometimes the user does not want to move his finger for a swipe for some distance, and many applications use a swipe as a reaction to quickly moving a finger across the screen to the side for a short distance. This is exactly what we applied in the last event listener.

Drag "n" Drop (Drag element)

Often, in application interfaces and games, you have to drag one of the elements with your finger to a certain place. Let's do it in javascript for touch screens. Let's start:

var obj = document.getElementById("sat");
/*Catch the touch*/
obj.addEventListener("touchstart", function(event) (
if (event.targetTouches.length == 1) (
var touch=event.targetTouches;
touchOffsetX = touch.pageX - touch.target.offsetLeft;
touchOffsetY = touch.pageY - touch.target.offsetTop;
}
), false);
/*Move the object*/
obj.addEventListener("touchmove", function(event) (
if (event.targetTouches.length == 1) (
var touch = event.targetTouches;
obj.style.left = touch.pageX-touchOffsetX + "px";
obj.style.top = touch.pageY-touchOffsetY + "px";
}
), false);

As you can see, this is not the whole code, so far we have obtained drag without drop "but. You have probably already noticed that the movement of the element is ultimately performed by css parameters left And top. Instead of these two lines, which are responsible for moving the object around the screen, you can put:

obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";

Those. use CSS3, but in my case I did not notice a performance increase, so it's better top And left. With this code, you can move an item around the field, but releasing it in a certain place will not be counted. To implement this, add a touchend handler to the object with the corresponding code inside:

var tarobj=document.getElementById("dro");
obj.addEventListener("touchend", function(event) (
if (event.changedTouches.length == 1) (
var tarWidth=tarobj.offsetWidth;
var tarHeight=tarobj.offsetHeight;
var tarX=tarobj.offsetLeft;
var tarY=tarobj.offsetTop;
if(
(event.changedTouches.pageX > tarX) &&
(event.changedTouches.pageX< (tarX + tarWidth)) &&
(event.changedTouches.pageY > tarY) &&
(event.changedTouches.pageY< (tarY + tarHeight))){
/*We are above the tarobj object*/
}
}
), false);

In order for everything to work, point your object to a variable tarobj and you will be happy.

Pitch (Pinch)

It's time to remember the famous pinch, which was first shown by Steve Jobs when he presented the first iPhone. It is this movement of two fingers towards each other or away from each other that is called a pinch. Usually this gesture is used to increase or decrease something.

In the example below, the key points are marked with comments (so that the code does not merge into a complete wheat porridge):

/*Define some variables*/
var objzoom = document.getElementById("dro");
var scaling = false;
var dist = 0;
varscale_factor = 1.0;
var curr_scale = 1.0;
var max_zoom = 8.0;
var min_zoom = 0.5
/*Write a function that determines the distance between fingers*/
function distance (p1, p2) (
return (Math.sqrt(Math.pow((p1.clientX - p2.clientX), 2) + Math.pow((p1.clientY - p2.clientY), 2)));
}
/*Catch the beginning of the slash*/
objzoom.addEventListener("touchstart", function(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
if (tt.length >= 2) (
dist = distance(tt, tt);
scaling = true;
) else (
scaling = false;
}
), false);
/*Catch the zoom*/
objzoom.addEventListener("touchmove", function(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
if (scaling) (
curr_scale = distance(tt, tt) / dist * scale_factor;
objzoom.style.WebkitTransform = "scale(" + curr_scale + ", " + curr_scale + ")";
}
), false);
/*Catch the end of the slash*/
objzoom.addEventListener("touchend", function(evt) (
vartt = evt.targetTouches;
if(tt.length< 2) {
scaling = false;
if (curr_scale< min_zoom) {
scale_factor = min_zoom;
) else (
if (curr_scale > max_zoom) (
scale_factor = max_zoom;
) else (
scale_factor = curr_scale;
}
}
objzoom.style.WebkitTransform = "scale(" + scale_factor + ", " + scale_factor + ")";
) else (
scaling = true;
}
), false);

In the example, we use an object with id for the test dro, you can use your object by assigning it to a variable objzoom. In variables, you can change the data, for example, the maximum zoom or minimum.

Sliding images and HTML

We have already described above how to make a swipe based on which you can slide images or your data in HTML code. However, this may not suit some, and if you are among those who want to get the result easier and faster without going into details, this subsection is for you.

First of all, we note a free JS development called Fotorama, which is very functional and useful for mobile application developers who want to use sliding.

There is also a beautiful image slider.

In addition to such a manual creation of a touch shell for an application or game, you can use a framework. Here is a list of Sencha Touch , jQ Touch , jQuery Mobile frameworks popular in this topic.

The last question is the question of compatibility of all this with mobile platforms. Well, touch supports Android 2.3-4.X and IOS. But multitouch is supported by everything except Android 2.3.

Don't forget that you should assign handlers to HTML objects when they are already known, i.e. in the event window.onload or DOMContentLoaded.

If you have something to add to the article - write in the comments.

The term gesture is a way to combine finger movements across the screen to launch some kind of action; finger movement in this case is used instead of just touching or clicking. Full touch (complete touch) or mouse - move-capturing function - is needed in order for the gestures to register and be absolutely correct. Today, only Safari and Android browsers have good support for this feature.

If your web application requires a user to use gestures, it's important to teach them the correct actions—using help, animated examples, or some other kind of prompt (Figure 8.5).

Rice. 8.5. Google Fast Flip is a new viewer that uses gestures on iPhone and Android devices. On the left you will see a warning dialog with instructions on how to use it. You will only see the instructions once.

Swipe gesture

The swipe gesture (also known as flip) is a touch browser technology commonly used to move content back and forth. This gesture is used, for example, in many photo galleries to change the displayed image and in presentations to flip through slides. The essence of the gesture is a simple finger movement along the X axis from left to right (horizontal swipe) or along the Y axis from top to bottom (vertical swipe). The swipe gesture is supported in almost every touch device, as it is performed with one finger.

There is no special standard event to intercept the swipe action, so we will emulate it using the available standard events

On Symbian 5th generation devices, if you use your finger instead of the cursor, the mouse down, move, and up events get rather strange results. The event fires only once during a finger drag action, and the event does not fire at all if the finger is moved from the initial mouse-down coordinates. Therefore, different approaches are needed to detect swipe in some situations.

Sequencing:

1. Intercept the event (or ontouchstart in iPhone and other compatible browsers) and start recording the gesture.
2. Intercept (or ontouchmove in iPhone and browsers with the required support) and continue recording the gesture if the x (or y) movement occurs within a certain threshold. Cancels the gesture if the movement is on a different axis.
3. Intercept onmouseup (or ontouchend in iPhone and browsers with the necessary support) and if at that moment the gesture continued (was active) and the difference between the initial and final coordinates is greater than a certain constant - define swipe in one direction.

The last point can be replaced with an on-the-fly gesture test inside the onmousemove event.

If you use jQuery in your work, you can use a free plugin from http://plugins.jquery.com/project/swipe to detect the horizontal swipe gesture on iPhone devices.

With the help of the following code, we can create an object-oriented library for detecting swipe (compatible with iPhone, Android and other devices):

/** Creates a swipe event gesture handler */ function MobiSwipe(id) ( // Constants this.HORIZONTAL = 1; this.VERTICAL = 2; this.AXIS_THRESHOLD = 30; // The user will not define a perfect line this. GESTURE_DELTA = 60; // The min delta in the axis to fire the gesture // Public members this.direction = this.HORIZONTAL; this.element = document.getElementById(id); this.onswiperight = null; this.onswipeleft = null ;this.onswipeup = null; this.onswipedown = null; this.inGesture = false; // Private members this._originalX = 0 this._originalY = 0 var _this = this; // Makes the element clickable on iPhone this.element. onclick = function() (void(0)); var mousedown = function(event) ( // Finger press event.preventDefault(); _this.inGesture = true; _this._originalX = (event.touches) ? event.touches. pageX: event.pageX; _this._originalY = (event.touches) ? event.touches.pageY: event.pageY; // Only for iPhone if (event.touches && event.touches.length!=1) ( _this.inGesture = false; // Cancel gesture on multiple touch ) ); var mousemove = function(event) ( // Finger moving event.preventDefault(); var delta = 0; // Get coordinates using iPhone or standard technique var currentX = (event.touches) ? event.touches.pageX: event.pageX ; var currentY = (event.touches) ? event.touches.pageY: event.pageY; // Check if the user is still in line with the axis if (_this.inGesture) ( if ((_this.direction==_this. HORIZONTAL)) ( delta = Math. abs(currentY-_this._originalY); ) else ( delta = Math. abs(currentX-_this._originalX); ) if (delta >_this.AXIS_THRESHOLD) ( // Cancel the gesture, the user is moving in the other axis _this.inGesture = false; ) ) // Check if we can consider it a swipe if (_this.inGesture) ( if (_this.direction==_this.HORIZONTAL) ( delta = Math.abs( currentX-_this._originalX); if (currentX>_this._originalX) ( direction = 0; ) else ( direction = 1; ) ) else ( delta = Math. abs(currentY-_this._originalY); if (currentY>_this. _originalY) ( direction = 2; ) else ( direction = 3; ) ) if (delta >= _this.GESTURE_DELTA) ( // Gesture detected! var handler = null; switch(direction) ( case 0: handler = _this.onswiperight; break; case 1: handler = _this.onswipeleft; break; case 2: handler = _this.onswipedown; break; case 3: handler = _this.onswipeup; break; ) if (handler!=null) ( // Call to the callback with the optional delta handler(delta); ) _this.inGesture = false; ) ) ); // iPhone and Android"s events this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", function( ) ( _this.inGesture = false; ), false); // We should also assign our mousedown and mousemove functions to // standard events on compatible devices )

Here is a simple example using our swipe.js library with horizontal swipe detection and more