Home > Developer > JavaScript
Details of mobile web development touch event instances and webtouch instances
Previous
In order to send some special information to developers, iOS Safari adds some proprietary events. Because iOS devices have neither a mouse nor a keyboard, regular mouse and keyboard events are insufficient when developing interactive web pages for mobile Safari. With the addition of WebKit in Android, many such Proprietary Events have become the de facto standard, leading W3C to develop the Touch Events specification. This article will introduce touch events on mobile terminals in detail
Overview
The iPhone 3G, which contains the iOS 2.0 software, was released with a new version of Safari. This new mobile Safari provides some new events related to touch operations. Later, the Android browser implemented the same event. A touch event is triggered when the user's finger is placed on the screen, slide on the screen, or removed from the screen. Specifically, there are several touch events
Touchstart: triggered when the finger touches the screen. Even if one finger is already on the screen, touchmove is triggered continuously when the finger slides on the screen. During this event, calling preventDefault () can block rolling touchend: triggers touchcancel when the finger is removed from the screen: triggers when the system stops tracking the touch (not commonly used ). The exact trigger time of this event is not explicitly described in this document
Touchenter and touchleave]
The Touch event specification once contains the touchenter and touchleave events, which are triggered when the user's fingers move in or out of an element. However, these two events have never been implemented. Microsoft has two alternative events, but only Internet Explorer supports them. In some cases, it is very useful to know that the user's fingers slide into and out of an element, so we hope these two events can return to the standard.
In Touch events, the following events are commonly used: touchstart, touchumove, and touchend.
Mouse touch mousedown touchstart mousemove touchmove mouseup touchend
[Note] Some versions of touch events in chrome simulator use the DOM0-level event handler to add events invalid.
<!DOCTYPE html>300 ms
A 300 ms problem means that there is a ms interval between an element's function and the touch event execution. Compared with touch events, such as mouse events, focus events, and default browser behavior, there is a latency of Ms.
[Point through]
Because of the existence of MS, it may cause Common Point-through problems. Let's take a look at the example.
<! DOCTYPE html>After a light blue translucent div is clicked (triggering the touch event), if the clicked position is at the top of the link, the default behavior of the link jump will be triggered. The detailed explanation is that after you click the page, the browser will record the page coordinate you clicked. After ms, you will find the element in the coordinate. Trigger click behavior on this element. Therefore, if the upper-layer elements of the same page coordinate disappear within ms, the clicking action is triggered on the lower-layer elements after Ms. This causes a point-through problem.
This problem occurs because the touch screen is overloaded. When you touch the screen with your fingers, the browser cannot predict that the user is in touch, Double-Tap, Swipe, Hold) or other operations. The only insurance method is to wait for a while to see what will happen next.
The problem is that Double-Tap ). Even if the browser detects that the finger has left the screen, it still cannot determine what to do next. Because the browser cannot know whether the finger will return to the screen again, or whether to trigger the touch event and event cascade. To confirm this, the browser has to wait for a short time. The browser developer finds an optimal interval of 300 milliseconds.
[Solution]
1. Increase the latency of MS in the touch event processing program.
(function () { var elesMap = { touchObj: document.getElementById('test') }, fnHide, onTouch; fnHide = function (type) { elesMap.touchObj.style.display = 'none'; }; onTouch = function (event) { setTimeout(function(){ fnHide(); },300); }; elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); }); })();2. Use a gentle animation to increase the transition effect by Ms. Note that the display attribute cannot use transition.
3. Add the dom element of the middle layer to allow the middle layer to accept this penetration event and hide it later.
4. The tap event is used in both the upper and lower levels, but the default behavior is inevitable.
5. The touchstart event on the document prevents default actions.
document.addEventListener('touchstart',function(e){ e.preventDefault();})Next, add the redirection behavior of the a tag.
a.addEventListener('touchstart',function(){ window.location.href = 'https://cnblogs.com'; })However, this method has side effects, which may cause Page scrolling and text unselected. If you want to restore the selected text on an element, you can use blocking bubbles to restore it.
el.addEventListener('touchstart',function(e){ e.stopPropagation();})Event object
Basic Information]
The event object of each touch event provides common properties in the mouse event, including the event type, event target object, event bubble, event stream, and default behavior.
Take touchstart as an example. The sample code is as follows:
<script> (function () { var elesMap = { touchObj: document.getElementById('test') }, onTouch; onTouch = function (e) { console.log(e) }; elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); }); })(); </script>1. The currentTarget attribute returns the node bound to the listener function in which the event is being executed.
2. The target attribute returns the actual target node of the event.
3. The srcElement and target attributes have the same functions.
// Current target currentTarget: [object HTMLDivElement] // actual target: [object HTMLDivElement] // actual target srcElement: [object HTMLDivElement]4. An integer is returned for the eventPhase attribute, indicating the current event stream stage of the event. 0 indicates that the event has not occurred, 1 indicates the capture phase, 2 indicates the target phase, and 3 indicates the bubble phase.
5. The bubbles attribute returns a Boolean value indicating whether the current event will bubble up. This attribute is read-only.
6. The cancelable attribute returns a Boolean value indicating whether the event can be canceled. This attribute is read-only.
// Event stream eventPhase: 2 // bubble bubbles: true // The default event can be canceled cancelable: true[TouchList]
In addition to common DOM attributes, a touch event object has a touchList array attribute that contains information about each touch point. If you touch the screen with four fingers, this array has four elements. There are three such arrays.
1. touches: The touch point array of the current touch screen (at least one touch is on the event Target element)
2. changedTouches: The touch point array that causes the touch event to be triggered
3. targetTouches: The touch point array on the event Target Element
If the last finger leaves the screen to trigger the touchend event, the last touch point information will not appear in the targetTouches and touches arrays, but will appear in the changedTouched array. Because its exit triggers the touchend event, the changedTouches array still contains it. Among the preceding three arrays, changedTouches is the most commonly used array.
(function () { var elesMap = { touchObj: document.getElementById('test') }, onTouch; onTouch = function (e) { elesMap.touchObj.innerHTML = 'touches:' + e.touches.length + '<br>changedTouches:' + e.changedTouches.length + '<br>targetTouches:' + e.targetTouches.length; }; elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); }); })();Event coordinates]
The elements in the above touch point array can be indexed using numbers like ordinary arrays. Elements in the array contain useful information about touch points, especially coordinate information. Each Touch object contains the following attributes:
Clientx: x coordinate of the touch target in the view clientY: y coordinate of the touch target in the view identifier: Unique IDpageX that identifies the touch target in the page x coordinate (including scrolling) pageY: touch y coordinates of the target in the page (including scrolling) screenX: Touch x coordinates of the target in the screen screenY: Touch y coordinates of the target in the screen target: Touch the DOM node targetThe first element in the changedTouches array is the touch point object triggered by the event (usually this touch point array does not contain other objects ). This touch point object contains the clientX/Y and pageX/Y coordinates. In addition, there are screenX/Y and x/y. These coordinates are inconsistent between browsers and are not recommended.
The difference between clientX/Y and pageX/Y is that the former is relative to the upper left corner of the Visual View, and the latter is relative to the upper left corner of the Layout View. You can scroll the Layout View.
(function () { var elesMap = { touchObj: document.getElementById('test') }, onTouch; onTouch = function (e) { var touch = e.changedTouches[0]; elesMap.touchObj.innerHTML = 'clientX:' + touch.clientX + '<br>clientY:' + touch.clientY + '<br>pageX:' + touch.pageX + '<br>pageY:' + touch.pageY + '<br>screenX:' + touch.screenX + '<br>screenY:' + touch.screenY }; elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); }); })();The above example of the touch event in mobile web development is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for the help house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
