One of js--multi-touch web front-end development under fingertips: handling of touch

Http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html

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

.spirit {              /* 方块的class名称*/         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

<bodystyle=”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 varcanvas = document.getElementById(“canvas”),       spirit, startX, startY;    // touch start listenerfunctiontouchStart(event) {         event.preventDefault();         if(spirit ||! event.touches.length) return;         vartouch = 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

functiontouchMove(event) {         event.preventDefault();         if(!spirit || !event.touches.length) return;         vartouch = 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.
While this event-handling pattern can satisfy our need to develop multi-touch Web applications, the Start–move–end process is a bit cumbersome,
Can you encapsulate some of the usual actions so that we can solve the problem with an event handler? Yes, the gesture incident was for this purpose.
Design, it encapsulates the fingers of 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, the finger move when the block followed
Move, 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 of all, we don't use event.touches to fetch all
Touch object, but uses the event.changedtouches array, which is used to get all the touch associated with this event. However, this
I found a strange feature, I don't know if my ipad is a problem or it's just that, when you have more than one finger on the screen
, if you lift a finger, the changedtouches of the Touchend event will contain all the touch objects of the finger, and then the remaining
The finger on the screen will re-trigger the Touchstart and refresh all the touch objects (identifier are different). If this is a all
Equipment has the characteristics, then will give programmers some inconvenience, do not know why the fruit to deal with this.
Introduction to Touch Event we donuts, here to recommend two documents:
1. Safari Dom Additions Reference
2. Safari Web Content Guide
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 js--multi-touch web front-end development under fingertips: handling of touch