Home > Developer > Web Develop
The fruit Company's small and cute devices provide us with an unprecedented user experience. When users are flying on iphone and ipad
, developers who use Objective-c to write good applications must feel a sense of accomplishment, because they (not the fruit
Make the world of iOS colorful. But for those of us who use the web as the core of our business, this is a much more addictive
The touch experience seems to have little to do with us, because the small part of the browser is the intersection between us and the user. And many websites in order to make iOS
Users can use their own services in a multi-touch experience, and are dedicated to developing OBJECTIVE-C's local programs as guest of their Web service
The user side.
In fact, for a web programmer or a Web site, if your needs are simply to allow iphone/ipad users to use your
Service, the existing HTML4 page can be fully met (perhaps a little refactoring, but easy); If you go up a little, you need to make your
Web client looks like it was implemented with OBJECTIVE-C, and it's not impossible, just move our familiar JavaScript to iOS
Ready to go.
This article from the perspective of a multi-touch web Developer, first of all, a brief introduction to the iOS browser (this is mainly referred to as Safari) supported by
Multi-touch event model, then the simple action of touch is promoted to gesture (gestrue), and finally JavaScript + HTML +
CSS-built apps get out of the browser, put on the iOS device's screen and become a local link and put together with plants vs zombies.
Safari on iOS also supports traditional interactive events such as Click and MouseOver, but it is not recommended to use the click on the iOS browser app and
MouseOver, because these two events are designed to support mouse clicks. The Click event will have a delay of about half a second on iOS and the original
Because iOS wants to highlight the element that receives the click. Events such as Mouseover/out are triggered by the click of a finger. So, on iOS
, we should abandon the traditional interactive event model and accept a new event model. Touch events and more advanced gesture events can make your Web page
Interact like native applications.
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: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。 |
The gesture event is a more advanced package for touch events, mainly dealing with finger slide, rotate, scale, etc., in the next article
Detailed.
Before you begin to describe the touch event, you need to describe the touch objects that are unique to your multi-touch system (Android and iOS and even Nokia's latest
The Meego system simulates a similar object, only for iOS, because I only have the ipad available for testing. ）。 This object encapsulates a single
Screen touch, usually from the finger. It is generated when the touch event is triggered and can be taken from the event object of the touch events handler
(typically through the Event.changedtouches property). This object includes some important attributes:
client / clientY：// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY：// 触摸点相对于页面的位置 screenX /screenY：// 触摸点相对于屏幕的位置 identifier： // touch对象的unique ID |
CSS Code
|
Then, under the body, define a container to receive events, where the body height must be 100% to fill 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 for 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'll use the block spirit as a global object, because we're going to test a single finger, so it's best to have one object on the screen moving.
(There will be multiple-touch instances). In Touchstart this event handler, we also first determine whether the spirit has been generated, which is
No already have a finger on the screen, if yes, return directly.
Like the traditional event listener, a multi-touch system produces an event object, except that the object has more attributes, such as
Here's event.touches, this array object gets all the touch on the screen. Note 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 don't want the screen to move,
To 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 appendchild the Spirit object into the container. Such
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.
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.
This event-handling pattern can satisfy our need to develop a multi-touch Web application, but the start–move–end process is a bit cumbersome, and
can encapsulate some common actions so that we can solve the problem with an event handler. Yes, the 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 block followed by the
move, the finger lifted when the block disappears, please download to view the trial.
through the examples contained in the attachment, we can see some of the more subtle features. First, instead of using event.touches to fetch all
touch objects, we use the event.changedtouches array to get all the touch associated with this event. However, in this
I found a strange feature, I do not know whether it is my ipad is a problem or this is the case when there are more than one finger on the screen when
, if you lift a finger, The changedtouches of the Touchend event will contain the touch object for all fingers, and then the other few left the
on-screen finger will re-trigger Touchstart and Refresh all Touch objects (identifier are different). If this is a feature that all
devices have, then there will be some inconvenience to the programmer, not knowing why the fruit should be treated this way.
Introduction to Touch event we donuts, here to recommend two documents:
1. 2. for programmers interested in developing multi-touch Web applications, Apple's developer site is a place that should be frequented.
Accessories: Ios-multi.rar
One of the js--multi-touch web front-end development under fingertips: Handling of touch (GO)
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
