Touch events of mobile touch screen web pages,

Touch events of mobile touch screen web pages,

Since the development of PC-side web pages, people have become accustomed to the human-computer interaction mode between the mouse and the keyboard. Therefore, mouse and keyboard events are generally used in PC-side web page development.

Mouse event:

Onclick event: This event occurs when you click the Left or Right button.

Ondoubleclick event: This event occurs when you double-click the left mouse button.

The onmousedown event occurs when the mouse button (left-click, right-click, or middle-click) is clicked and has not been released.

Onmousemove event: occurs when the cursor moves.

Onmouseup event: This event occurs when you release the mouse button (left-click, right-click, or middle-click.

Onmouseover event: occurs when the mouse cursor moves over the object.

Onmouseout event: occurs when the mouse cursor leaves the object.

Ommousewheel event: occurs when the scroll wheel is moved.

Keyboard event:

Onkeypress event: This event occurs when you press and release a key.

Onkeydown event: the event occurs after the key is clicked (before the key is released.

Onkeyup event: a key is released.

With the development of science and technology, more and more touch-screen devices are available. The Human-Computer Interaction Mode of touch-screen devices (including multi-touch technology) click, double-click, drag, drag, zoom out, zoom in, press, double-finger click, hold and drag, rotate, and so on. For details, see the learning notes-gestures of mobile interaction. Currently, three interactive modes, touch, traditional mouse, and keyboard, coexist. Web developers need to ensure that the website adapts to these three interaction modes.

Today, we will only introduce several popular touch events. You can test this event in most modern browsers (it must be a touch screen device ):

Touchstart:Triggered instantly when the user's fingers touch the screen.

Touchmove:It is triggered continuously when you move your finger.

Touchend:Instantly triggered when the user's finger leaves the screen.

Touchcancel: Its Meaning Depends on the browser.

Touchcancel

I admit that I don't quite understand the touchcancel event. Touchcancel is triggered when the touch sequence is canceled. But what this means depends entirely on the browser's implementation: Chrome triggers the touchcancel event when the user's finger leaves the screen, but most other browsers do not. Fortunately, I have not discovered the need to use touchcancel. It seems that touchcancel is rarely used in other scripts and libraries. Some codes are equivalent to touchend for security purposes.

Each touch event contains three touch lists, each containing a series of corresponding touch points (used for multi-touch ):

Touches:List of all fingers currently on the screen.

TargetTouches:The list of fingers on the current DOM element.

ChangedTouches:List of finger involved in the current event.

Each touch point contains the following Touch Information (commonly used ):

Identifier:A value that uniquely identifies the current finger in a touch session. Generally, it is the serial number starting from 0 (android4.1, uc)

Target:A dom element is the target of an action.

pageX/pageX/clientX/clientY/screenX/screenY:A value that specifies the position where an action occurs on the screen (page contains the scroll distance, client does not contain the scroll distance, and screen is based on the screen ).

radiusX/radiusY/RotationAngle:Draw an elliptical shape that is about the same as the shape of the finger, which is the radius and Rotation Angle of the elliptical shape.

 

Equivalent event

Currently, both interaction modes have their own set of events, but this does not mean they are completely irrelevant and different. In fact, some events are equivalent. The following table shows the situation.

It can be seen that the equivalent event exists, depending on the context. However, the touch, button, and mouse events are not exactly the same. When you move the pointer to an element or press a mouse button, the system can immediately determine which event should be triggered. The Touch operation is different. The touch operation can lead to different actions: when your fingers touch the screen, the system cannot determine your intention. You just want to Tap an element? Or want to scroll a scrollable element? Or want to scale? Or do you want to Double-Tap )? The browser must wait for a certain period of time before making a judgment. This time interval is not very short, but a perceptible interval.

Can I merge touch and mouse events?

We found that mouse events and touch events are usually very similar, but there are some essential differences between them. With this understanding, we can better understand Microsoft's pointer events and why we propose pointer events. Microsoft believes that there is no need to separate mouse and touch events. Whether it's a mouse pointer, a finger (touch), or a touch pen (also called a positioning pen), a pointer event is triggered as long as something is changed through these pointers. Therefore, the following is an equivalent event of the Microsoft version.

Now we have two types of event classification: The Apple version with separated mouse and touch, and the Microsoft version with integrated mouse and touch. So far, only Internet Explorer supports Microsoft. Other browsers support the Apple version. As we can see earlier, Mozilla and Google are considering implementing PointerEvent ). So the future may change.

This article describes touch and pointer events of mobile Web.