Details about JS touch events and gesture events, and details about js Touch gestures

Details about JS touch events and gesture events, and details about js Touch gestures

Touch screens are already the norm of electronic devices around us. Touch events are also the most frequently used events with the appearance of touch screens!
After a touch screen event is used, other original mouse events cannot be used? Of course not. It's just not that easy to use.

What are the inapplicable mouse events?

Dbclick

Touch screen devices do not support double-click events. Double-click the browser window to enlarge the screen.

You can add the following line to the head label:

Copy codeThe Code is as follows:
<Meta name = "viewport" content = "width = device-width, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Yes. The pages we write will not be zoomed in or out with the gestures we use.

AboutmetaTag. I have not studied it yet. Sin.

Mouse

On the touch screen, we click an element to trigger it accordingly:mousemove mousedown mouseup clickTherefore, when writing a mobile client interface, you can directly add a move event to the element to improve efficiency.

It also triggersmouseoverAndmouseout, Test results, I found that only when the page is refreshed for the first time, click the element to trigger the mouseover event.

With the widespread use of touch screen mobile devices, W3C began to develop TouchEvent specifications.

Touch event

This type of event is triggered when the user's finger is placed on the screen, sliding on the screen, or moving away from the screen. Specifically, there are several touch events.
1. touchstart

Triggered when the finger is placed on the screen.

2. touchmove

It is triggered continuously when the finger slides on the screen.

3. touchend

Triggered when your finger leaves the screen.

4. touchcancel

The document does not clearly describe when the tracing is triggered when the system stops.

[Total] The four above are the touch events provided by w3c. They are only for touch devices. The first three are most commonly used.

Because the touch will cause the screen to move, it can be used in the event processing function of these events.event.preventDefault()To prevent the screen from scrolling by default.

In addition to common DOM attributes, touch events also contain the following three attributes for tracking touch.
1. touches: indicates an array of touch objects for the currently tracked touch operation.

When one finger is on the touch screen, event. touches. length = 1,

When two fingers are on the touch screen, event. touches. length = 2, and so on.
2. targetTouches: an array of touch objects specific to the event target.

Because the touch event is bubbling, this attribute is used to indicate the target object.

3. changedTouches: indicates the array of touch objects that have changed since the last touch.

Each touch object contains the following attributes:
4. clientX: Touch the x coordinate of the target in the viewport.

ClientY: Touch the y coordinate of the target in the viewport.

Identifier: Unique ID that identifies a touch.

PageX: Touch the x coordinate of the target in the page.

PageY: Touch the y coordinate of the target in the page.

ScreenX: Touch the x coordinate of the target in the screen.

ScreenY: Touch the y coordinate of the target in the screen.

Target: the DOM node target to be touched.

[How to use it ?]

  EventUtil.addHandler(div,"touchstart",function(event){    div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY;  });  EventUtil.addHandler(div,"touchmove",function(event){    event.preventDefault();    div.innerHTML=event.touches[0].clientX;  });  EventUtil.addHandler(div,"touchend",function(event){    div.innerHTML=event.changedTouches[0].clientY;  });

Use clientX ...... You must specify a specific touch object instead of an array.

event.touches[0]

IntouchendIn the event processing function, when this event occurs, there is no touch object in the touches. In this case, the changeTouches set is used.

Gesture events

1. Gesturestart: triggered when one finger has been pressed on the screen and the other finger has been touched on the screen.
2. Gesturechange: triggered when the position of any finger on the touch screen changes.
3. Gestureend: triggered when any finger is removed from the screen.

Note: These gesture events are triggered only when both fingers touch the receiving container of the event.

Relationship between touch events and gesture events

1. When a finger is placed on the screentouchstartEvent. If another finger is placed on the screengesturestartEvent, then triggertouchstartEvent.

2. If one or two fingers slide on the screengesturechangeEvent, but if one finger is removed, it will triggergestureendEvent, and then triggertoucheendEvent.

Gesture-specific attributes

1. Rotation: the rotation angle caused by finger changes. A negative value indicates clockwise, and a positive value indicates clockwise, starting from scratch.
2. Scale: it indicates the distance between two fingers. If you scale in, the distance is shortened. The value starts from 1 and increases with the distance.
   

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.