What is flick, stretch, pen, swipe, tap, touch in a smartphone and tablet: mobile slang. How to use TalkBack gestures Move your finger across the screen

When developing applications for Android and iPhone with iPad (IOS) using only web technologies, every developer sooner or later faces the question of implementing and using complex multi-touch actions in his 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 material we will look at ways to process touch events of varying complexity using Javascript Events, without third-party libraries (we’ll just grab jQuery min).

I’ll make a reservation right away that I will use jQuery only 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, we’ll start with theory and actually touch on what events should be used when creating an application or game.

A total of 3 key events are used:

touchstart- Touched the screen

touchend- The finger was removed

touchmove- Move your finger

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

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

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

targetTouches- List of fingers that interact with the element

changedTouches- List of fingers that are involved in the current event. If, for example, this 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 is the situation:

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

I place the second finger and now touches has 2 elements, targetTouches will have 2 elements if I place the second finger on the same HTML element same as the first one, and changedTouches in turn will have only 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 (one per finger).

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

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

When I remove the last finger, the touches and targetTouches lists will not contain anything, 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 that 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, I’ve already taught you something, and now it’s time to move on to practice.

Before we get started, there are a few things you should understand. In every game and application that you will make on Android and iOS, you must disable the standard response of the WebView component to events. For this we connected jQuery (I couldn’t do in 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);

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

We took a break. Let's continue.

Let's use the knowledge we have gained to describe all the basic touch interactions with the screen and elements.

Tap

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

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

In the example in the variable myclick will contain your touch.

Long tap

Although not often, 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 look at how to make a long touch in Javascript 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 the release of the finger*/
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 implementation of Long Tap in JavaScript. 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 whether the position of the finger on the screen has changed. If the finger is in the same place and time has passed more than 800 milliseconds, we perform Long Tap actions.

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

Implementation 2:

var timer;
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, if the finger did not move, it triggers the Long Tap event, which you must place in the longTouch function. longTouch.

Swipe

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

If you don’t want to bother and you only need the Swipe functionality in the mobile application, 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){
/*SWIP LEFT*/)
else(
/*SWIP RIGHT*/)
}
else(
if (finalPoint.pageY< initialPoint.pageY){
/*SWIP UP*/)
else(
/*SWIP DOWN*/)
}
}
), false);

This is our first implementation of swipe in Javascript. 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. In this and many other examples, do not forget 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 don’t forget.

Now let's look at another - classic implementation, when swipe needs to be counted in real time, for example when turning a page:

In this method, we took a slightly different route and partially used the principle of first implementation. Logically, this is a slightly more complex swipe. In the place where /*Process data*/ is commented, you should use the coordinates of the swipe finger. For example, this could be an animation of turning a page, and the further to the left your finger is, the more the page turns. For example, we are in the event listener part touchmove only the x-coordinate was tracked, the y-coordinate was screwed in a similar way. In variable otk.x the current position of the finger relative to the point where it first touched the touch is stored. If the finger is to the left of this point, then the variable has a negative value, if it is to the right, it is positive.

For example, we set a condition there when the finger moves a distance of more than 200 pixels to the left or right of the touch point - we count a swipe. What is this for? For example, you can, as soon as the user touches and begins to move his finger, show him a smooth turning of the page that follows his finger, and as soon as the finger goes beyond 200 pixels, the final animation is performed and the page turns. It's like one of the possible way using such a swipe.

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

Drag"n"Drop (Drag an element)

Often in application interfaces and games you have to drag one of the elements to a certain place with your finger. Let's do it in javascript, tailored 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’ve got drag without drop. You’ve probably already noticed that moving an element is ultimately done by CSS parameters left And top. Instead of these two lines, which are responsible for moving an object across 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 didn’t notice any performance gain, so it’s better top And left. With this code you can move an object around the field, but releasing it at 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

It's time to remember the famous pinch that Steve Jobs first showed when he presented the first iPhone. It is this movement of two fingers towards or away from each other that is called a pinch. Typically this gesture is used to make something bigger or smaller.

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

/*Defining some variables*/
var objzoom = document.getElementById("dro");
var scaling = false;
var dist = 0;
var scale_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)));
}
/*Catching the beginning of the contact*/
objzoom.addEventListener("touchstart", function(evt) (
evt.preventDefault();
var tt = evt.targetTouches;
if (tt.length >= 2) (
dist = distance(tt, tt);
scaling = true;
) else (
scaling = false;
}
), false);
/*Catching the zoom*/
objzoom.addEventListener("touchmove", function(evt) (
evt.preventDefault();
var tt = 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 contact*/
objzoom.addEventListener("touchend", function(evt) (
var tt = 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 testing dro, you can use your object by assigning it to a variable objzoom. In variables you can change data, for example maximum zoom or minimum.

Sliding images and HTML

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

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

There is also a beautiful image slider.

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

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 attach handlers to HTML objects when they are already known, i.e. in the event window.onload or DOMContentLoaded.

If you have anything to add to the article, write in the comments.

Dear friends who are starting to master a smartphone!

If you have switched from a regular push-button mobile phone to a smartphone with a touch screen (touch screen), then some of you at first experience Difficulties in mastering the touch screen. It is not very clear to you how to touch the screen, how long to hold the touch, how to move around 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 development mobile devices. It allows you to increase the screen area to almost the entire front surface of the smartphone and make it easier to control. But at the same time, at first there appears some inconvenience. Regular phone you could pick it up in your hand any way you wanted and touch any part of the front panel and screen. With smartphones you need to be more careful, since any accidental touch to the surface of the screen can cause unwanted action. You need to develop the habit of holding your smartphone in your hand without touching the screen unnecessarily, at least while it is unlocked.

So here you go basic management techniques touch screen:

Single touch (tap)

This fast(virtually no delay) touching the screen one finger. The delay should not exceed 0.5 seconds. Any touch is easy enough to make, since modern capacitive touch screens are very sensitive (unlike resistive ones that are already a thing of the past).

On the home screen (and any work screen - desktop), a single tap on the application icon launches the application. This analogue of pressing the left button mouse on a regular computer. In other cases, within the application this may be selecting an option from several offered, selecting a contact in the contact list, confirming an action, etc.

Single touch in text fields inserts the cursor where you touched it.

Delayed touch (long tap)

This is touch 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 cause the context menu to appear ( analogue of the right button mice).

Pressing and holding an icon on the main screen causes this icon to “stick” to your finger, which makes it possible to move it around the screen, including to the adjacent work screen, as well as delete the icon (not the application itself) to the trash bin that appears on the screen.

In text fields, the delay causes selecting a fragment text under your finger with the possibility of further expanding the selection using the emerging end marks, at the same time a menu appears Copy, Select All, Cut, Paste. Pausing on the cursor mark causes the menu to appear Insert(last clipboard contents), Paste from clipboard(any of the 20 most recent clipboard contents).

Double tap

Double tap with one finger with a short interval between taps (no more than 0.2 seconds). Used to alternately zoom in and out of a web page in a browser, a picture 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.

Tap & drag

This is touch one finger with immediate (delay no more than 0.2 sec) start of movement finger across the screen without releasing your finger. Further delay in one place after the start of movement does not matter: the contents of the screen seem to stick to the finger until the moment of release. 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 (for example, volume, brightness, etc.).

Swipe

This one-finger action is similar to the previous one, but it is only done without prolonged movement across the screen, reminiscent of a quick brush stroke on paper. In this case, the content of the screen continues to move even after lifting your finger from the screen in the process of “smearing” with a gradual slowdown. I remember the video of the first demonstration of this effect by Steve Jobs on Apple presentations The iPhone 2G received a storm of applause in 2007.

Now let's look at touch techniques two fingers. In this case, the fingers can be on the same hand or on different ones, it doesn’t matter.

Pinch (pinch) and spread apart two fingers (pinch, zoom)

This technique is used to smoothly reduce and, accordingly, increase the scale of an image on the screen (pictures, web pages). You place both fingers on the screen almost simultaneously, and then make a pinch or pinch motion. The direction of movement of the fingers (right-left, up-down or intermediate movements) does not matter.

Rotate with two fingers (rotate)

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

Android devices use a touch screen. Users who are accustomed to button controls may find it difficult to adapt to working with a touch screen.

Push-button control uses a keyboard and mouse, while the touch screen is controlled using your fingers or a stylus.

On the one hand, gesture controls seem 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.

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

Let's look at the main seven techniques used in touch screens. Android gestures can be the following:

1. Touch (press)

Tapping (or pressing) is the basic action most commonly used on a touchscreen.

Touching is necessary in many cases:

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

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

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

I can’t help but remember how many years ago I went to the terminal, pressed the terminal buttons to deposit money into 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 made 3 or 4 approaches to the terminal on different days with zero results. One fine day, a young man who was standing in line at the terminal behind me said: “What if I press my finger on the screen?” And here it is, happiness: I pressed my finger on the screen and the terminal began to respond to clicks, everything worked out. This was my first encounter with a touch screen.

2. Double tap

Double tap (or double tap) is used to quickly 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 need to double-tap the screen again.

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

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

3. Touch and hold

Pressing (touching) and 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 cause some surprise 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 touching and holding.

This action is very similar to right-clicking in Windows, when after right-clicking on any object, the so-called context menu With additional options object.

4. Swipe (swipe)

Swiping can also be called swiping or scrolling. Having lightly touched the screen, without releasing your finger, you need to move your finger from top to bottom, from bottom to top, from left to right, or from right to left, that is, as if to lightly brush away “dust from the screen” in the desired direction.

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

When I first needed to send a message in Russian on a smartphone, to do this I needed to change the layout on the virtual keyboard from English to Russian. I tried all the options, even went into the language settings, but it didn’t work: the English layout “stood rooted to the spot.” I was told that I just need to lightly wave my finger across 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 I waved my finger over the space, the layout immediately changed to Russian. That's swiping, it works!

5. Drag and Drop (Drag and Drop)

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

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

6. Pinch and spread fingers

Simple and useful feature to change the scale of what is displayed on the screen: picture, text, map, diagram, etc. You can zoom in and zoom out again if necessary.

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

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

7. Changing 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 orientation from one to another, you just need to rotate the smartphone. In this case, the Screen Rotation function must be activated in the screen parameters. If the function is deactivated, the image will not be rotated.

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

They are easy and quick to learn, you just need to practice a little to get started. Gestures are logically understandable; this is the action you expect from them. Except touch and hold is a little unnatural. The rest of the gestures are intuitive. Therefore they are easy to remember.

P.S. Check out other materials:

Receive the latest articles on computer literacy directly to your mailbox .
Already more 3,000 subscribers

Articles and Lifehacks

The spread of mobile devices with touch screens has introduced another muddy wave of Anglicisms into our language.

What are all these “ flick», « stretch», « pen», « tap», « swipe», « touch", and how do they differ from each other?

We bring to your attention a short dictionary of jargon associated with touch screens.

Scrolling (scrolling, from scroll– scroll) – scrolling the screen in one way or another. The term appeared on desktops, where the mouse wheel was used for scrolling. In gadgets, this is done by vertically moving your finger across the display.

Screenshot (screenshot, screen- screen, shot– shot) – so-called screenshot where the current picture is saved in graphic file. To create screenshots, appropriate applications and cloud services are used.

Gestury , gestures (gestures) - certain movements on the pointer screen, in this case - a finger or, allowing you to replace certain commands or their sequences. Significantly speed up and simplify work with mobile devices.

Touchscreen (touch screen, touch– touch) – a touch display that responds to touches. In addition to mobile devices, it is used in terminals and ATMs.

Tap And doubletap – (tap– press) – a short press on an element of the touch display interface, similar to a mouse click. Respectively, doubletap – double click.

Touch – a longer press than a tap, has no analogue on desktops.

Touch 'n' hold (touch and hold– touch and hold) – is clear from the translation: pressing and holding a finger or stylus for a long time.

Swipe , slide (swipe, slide– slide) – a prolonged sliding movement of a finger across the display, for example, when opening the camera shutter.

"Swipe" It also has another meaning - a special way of typing without lifting your finger from the virtual keyboard, used in the popular Swype Keyboard application.

Flick (flick- light blow, click) - click on the display of a smartphone or tablet obliquely, after which the screen begins to move in the indicated direction.

Peng (pan- panning, and not at all a “frying pan” or “toilet bowl”, as some might think) - movement across the screen of an enlarged image, allowing you to see parts hidden behind the edge of the screen.

Pinch (pinch– pinch) and stretch (stretch– stretching) – “squeezing” and “stretching” movements of the fingers, allowing, respectively, to reduce or increase the scale of the picture.

Some may not like the dominance of such slang words in the modern lexicon.

Well, no one is forced to use them: just try to come up with a Russian equivalent for each of them and try to use it in everyday communication on the Internet.

Perhaps you will be able to pass for a so-called true Gramar Nazi, but most likely you will simply look like a noob in the eyes of your interlocutor, i.e., a stupid newbie.

How to work

Tap

Long tap

Swipe

Drag"n"Drop (Drag an element)

Pitch

Sliding images and HTML

Single touch (tap)

Delayed touch (long tap)

Double tap

Tap & drag

Swipe

Pinch (pinch) and spread apart two fingers (pinch, zoom)

Rotate with two fingers (rotate)

1. Touch (press)

2. Double tap

3. Touch and hold

4. Swipe (swipe)

5. Drag and Drop (Drag and Drop)

6. Pinch and spread fingers

7. Changing screen orientation

You may also like