JS built-in touch event for mobile web development [GO]

Last Update:2017-07-04 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Safari on iOS also supports traditional interactive events like Click and MouseOver, but it's not recommended to use Click and mouseover on iOS browser apps, because these two events are designed to support mouse clicks. The Click event has a delay of about half a second on iOS because iOS wants to highlight the element that receives the click. Events such as Mouseover/out are triggered by the click of a finger. Therefore, on iOS, you should discard the traditional interactive event model and accept a new event model. Touch events and more advanced gesture events allow your Web pages to interact like native apps.

Handling Touch events allows you to track the location of each finger of the user. You can bind the following four kinds of touch events:

Touchstart: Triggers when the finger is placed on the screen

Touchmove: Triggers when the finger moves on the screen

Touchend: Triggers when the finger picks up from the screen

Touchcancel: Triggered when the system cancels the touch event. As to when the system will be canceled, unknown.

The gesture event is a more advanced package for touch events, mainly dealing with finger slide, rotate, scale, and more in the next article.

Before you begin to describe the touch event, you need to describe a touch object that is unique to a multi-touch system (Android and iOS, and even Nokia's newest Meego system simulates a similar object, only for iOS, because I only have the ipad available for testing. ）。 This object encapsulates a screen touch, usually from a finger. It is generated when the touch event is triggered and can be picked up by the event object of the touch events handler (typically via the Event.changedtouches property). This object includes some important attributes:

Client/clienty: The location of the touch point relative to the browser window viewport

Pagex/pagey: The position of the touch point relative to the page

Screenx/screeny: The position of the touch point relative to the screen

Unique ID of the Identifier:touch object

We start the world of multi-touch web pages from an instance touched by a single finger. When a finger is lowered, a block appears on the screen, and the finger moves the block as it moves, and the finger mentions the block disappears. First, let's define the CSS for the BLOCK:

JavaScript code

. Spirit {/* box's class name */
Position:absolute;
width:50px;
height:50px;
background-color:red;
}

Then, under the body, define a container to receive events, where the body height must be 100% to fill the entire viewport:

HTML code

<body style= "height:100%;margin:0;padding:0" >
<div id= "Canvas" style= "position:relative;width:100%;height:100%;" ></div>
</body>

Define the event handler for Touchstart and bind the event:

JavaScript code

Define global variable
var canvas = document.getelementbyidx_x_x_x ("Canvas"),
Spirit, StartX, starty;
Touch Start Listener
function Touchstart (event) {
Event.preventdefault ();
if (Spirit | |! event.touches.length) return;
var touch = event.touches[0];
StartX = Touch.pagex;
Starty = Touch.pagey;
Spirit = document_createelement_x_x_x ("div");
Spirit.classname = "Spirit";
Spirit.style.left = StartX;
Spirit.style.top = Starty;
CANVAS.A (spirit);
}
Add Touch Start listener
Canvas.addeventlistener ("Touchstart", Touchstart, false);

First, we'll use the block spirit as a global object, because we're going to test a single finger now so it's better to have only one object on the screen moving (and so on with a multi-touch instance). In Touchstart this event handler, we also first determine whether a spirit has been generated, that is, whether a finger has been placed on the screen, and if so, return directly.

Like the traditional event listener, a multi-touch system produces an event object, except that the object has more properties, such as the event.touches here, which gets all the touch on the screen. Notice here the Event.preventdefault (), in the traditional event handler, this method blocks the default action of the event, the default action of the touch event is the scroll screen, we do not want the screen to move around, so call this function first. Let's take the first touch and pagex/y it as the initial position when the spirit was created. Next, we create a div and set classname,left,top three properties. Finally, we put spirit object A into the container. So, when the first finger is down, a red, 50px square block is placed on the screen.

Then, we're going to start processing the events that the finger moves on the screen:

JavaScript code

function TouchMove (event) {
Event.preventdefault ();
if (!spirit | |!event.touches.length) return;
var touch = Event.touches[0],
x = Touch.pagex–startx,
y = Touch.pagey–starty;
Spirit.style.webkitTransform = ' translate (' + x + ' px, ' + y + ' px) ';
}
Canvas.addeventlistener ("Touchmove", Touchmove, false);

In touch move listener, we use WebKit-specific CSS properties: Webkittransform to move the block, this property specifically how to use Google. It is recommended to use WebKit's own features when constructing Web pages for iOS devices, not only to dazzle, but also to use hardware directly to improve performance.

Finally, we handle the Touchend event. When the finger is lifted, the block is removed from the screen.

JavaScript code

function Touchend (event) {
If (!spirit) return;
Canvas.removechild (spirit);
Spirit = null;
}
Canvas.addeventlistener ("Touchend", Touchend, false);

Test the above code on your ipad or iphone. If not unexpected, a complete multi-touch Web program is born.

Although this kind of event processing mode can meet our needs of developing multi-touch Web application, but the start–move–end process is a bit cumbersome, can we encapsulate some common actions so that we can solve the problem with an event handler? Yes, gesture event is designed for this purpose, it encapsulates the finger scale, slide, rotate and other commonly used actions. However, we will discuss the issue again in the next chapter.

Attachment is a more complicated example, each finger down will produce a different color of the box, when the finger moves when the box moves, the finger lifted when the block disappears, please download to view the trial.

We can see some of the more subtle features through the examples contained in the attachment. First, instead of using event.touches for all touch objects, we use the event.changedtouches array to get all the touch that's associated with this event. But here I find a strange feature, I don't know if my ipad is a problem or it is, that is, when there are multiple fingers on the screen, if you lift a finger, the changedtouches of the Touchend event will contain all the finger touch objects, and then, Several other fingers left on the screen will re-trigger the Touchstart and refresh all the touch objects (identifier are different). If this is a feature of all devices, then it will bring some inconvenience to the programmer, and do not know why the fruit should be treated so.

Introduction to Touch Event we donuts, here to recommend two documents:

Safari dom Additions reference:http://developer.apple.com/library/safari/#documentation/appleapplications/ Reference/safarijsref/intro/intro.html#//apple_ref/doc/uid/tp40001482-ch2g-bajdajag

Safari Web Content Guide:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ Introduction/introduction.html

JS built-in touch event for mobile web development [GO]

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JS built-in touch event for mobile web development [GO]

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support