The small and cute devices of the Fruit company provide us with an unprecedented user experience. When a user is on an iPhone or iPad
Developers who use objective-C to write excellent applications must feel a sense of accomplishment, because they (rather than fruit)
) To make the IOS world more colorful. However, for those of us who take web as the core of their own business Program Members, this is a lot of hard to stop.
The trigger experience seems to have little to do with us, because the small part of the browser is the intersection between us and users. Many websites
Users can use their own services in a multi-touch experience. They are dedicated to developing objective-C local programs as their Web Service customers.
User.
In fact, for a Web programmer or website, if you only need to enable iPhone/iPad users to use your
Service, the existing html4 page can be fully satisfied (it may need a little reconstruction, but it is very easy); if you go up a little more, you need to let you
The Web client looks like it is implemented with objective-C, and it is not impossible, just move the Javascript we are familiar with to IOS
Backup.
From the perspective of a beginner in multi-touch web development, this article first briefly introduces
Trigger event model, upgrade touch to gestrue, and add JavaScript + HTML +
Applications built by CSS are separated from browsers and placed on the screen of iOS devices as a local link and put together with plants and zombies.
Safari on iOS also supports traditional interactive events such as click and Mouseover, but it is not recommended to use click and
Mouseover, because these two events are designed to support mouse clicks. The click event has a latency of about half a second on IOS.
Because IOS needs highlight to receive the click element. The events such as Mouseover/out are triggered by the click of the finger. Therefore, on iOS
The traditional interactive event model should be abandoned to accept a new event model. Touch events and more advanced gesture events allow Your webpage
It interacts like a native application.
Processing touch events allows you to track the position of each finger of a user. You can bind the following four touch events:
Touchstart: // trigger the touchmove when the finger is placed on the screen: // trigger the touchend when the finger moves on the screen: // trigger the touchcancel when the finger is picked up from the screen: // triggered when the system cancels the touch event. It is unknown when the system will be canceled ..
A gesture event is a more advanced encapsulation of touch events. It mainly handles finger slide, rotate, scale, and other actions.Article
Details.
Before describing the touch event, you must first describe the specific touch objects in the multi-touch system (Android, IOS, and Nokia are the latest
The meego system has simulated similar objects. here only for iOS, because I only have iPad for testing ..). This object is encapsulated once.
Screen touch, usually from fingers. It is generated when the touch event is triggered. It can be obtained through the event object of the touch event handler.
(Usually through the event. changedtouches attribute ). This object includes some important attributes:
Client/clienty: // The Position of the touch point relative to the viewport of the browser window. pagex/Pagey: // The Position of the touch point relative to the page. screenx/screeny: // the location of the touch point relative to the screen. identifier: // unique ID of the touch object
CSSCode
. Spirit {/* block class name */position: absolute; width: 50px; Height: 50px; Background-color: red ;}
Then, define a container for receiving events under the body. Here, the body height must be 100% to occupy the entire viewport:
Html
<Body style = "height: 100%; margin: 0; padding: 0"> <Div id = "canvas" style = "position: relative; width: 100%; Height: 100%; "> </div> </body>
Define the event handler function of touchstart and bind the event:
JavaScript code
// Define global variablevar canvas = document. getelementbyid ("canvas"), spirit, startx, starty; // touch start listenerfunction touchstart (event) {event. preventdefault (); If (spirit |! Event. touches. length) return; var touch = event. touches [0]; startx = touch. pagex; starty = touch. pagey; spirit = document. createelement ("Div"); spirit. classname = "spirit"; spirit. style. left = startx; spirit. style. top = starty; canvas. appendchild (spirit);} // Add touch start listenercanvas. addeventlistener ("touchstart", touchstart, false );
First, we use square spirit as a global object, because we want to test a single finger, so it is best to move only one object on the screen
(Wait for multiple-touch instances ). In the touchstart event processing function, we first determine whether spirit has been generated, that is
No, a finger has been put on the screen. If yes, return directly.
Like the traditional event listener, a multi-touch system also generates an event object, but this object requires more attributes, such
Here event. touches, this array object gets all the touch on the screen. Note the event. preventdefault () in the traditional
In the event processing function, this method blocks the default action of an event. The default action of a touch event is a scrolling screen.
To call this function first. Take the first touch and use its pagex/y as the initial position when spirit is created. Next, we create
A Div with three attributes: classname, left, and top. Finally, we add the spirit object appendchild to the container. In this way,
When the first finger is put down, a red, 50px square is put on the screen.
Then, we will start to process the events where the fingers move 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 the WebKit-specific CSS attribute: webkittransform to move the square. please google the specific use of this attribute. We recommend that you try to use WebKit's own features when constructing a webpage for iOS devices. This will not only be dazzling, but also allow you to directly use hardware to improve performance.
Finally, we handle the touchend event. The square is removed from the screen when the finger is lifted.
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 nothing happens, a complete multi-touch web program is born ..
Although this event processing mode can meet our needs for developing multi-touch web applications, 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. That's right. The gesture event is for this purpose.
It encapsulates the scale, slide, rotate, and other common actions of the finger. However, we will discuss this issue in the next chapter ..
The attachment is a more complex example. When each finger is put down, a square of different colors will be generated. When the finger moves, the square will follow
When the finger is lifted, the square disappears. Please download it for trial use.
We can see some concealed features through the examples contained in the attachment. First, we do not use event. touches to retrieve all
Touch object, but uses the event. changedtouches array to obtain all the touch related to this event. However
I found a strange feature. I don't know if there is a problem with my iPad or it is like this, that is, when there are multiple fingers on the screen
If one finger is raised, the changedtouches of the touchend event will contain the touch objects of all fingers, and then several others will be left
The finger on the screen will re-trigger the touchstart and refresh all touch objects (identifier is different ). If this is
All the features of the device will cause inconvenience to the programmer. I don't know why the fruit should be processed like this.
The introduction to touch event is just a few minutes away. Here we recommend two documents:
1. Safari Dom additions reference
2. Safari Web Content Guide
For programmers who are interested in developing multi-touch web applications, Apple's developer site should be a frequent place to visit.
Attachment: ios-multi.rar
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
