JS development of multi-touch screen browser

This article describes a lot of mobile phone touch event knowledge, such as touchstart,touchmove,touchend, for the screen to get left and right with the web version of the same OH. I used to be less exposed to this knowledge, recently done a project only to find that the original with Event.pagex is not able to get the current position (on the phone). Need to use var touch = event.originalevent.touches[0]; Then Touch.pagex can get it in the phone. I'll share more of this in the future, and it's really interesting to know about mobile development.

Objective
Mobile devices such as smartphones and tablets typically have a capacitive touchscreen (capacitive touch-sensitive screen) to capture the interaction of the user's finger. With the development of mobile networks, which can support more and more complex applications, web developers need a way to handle these events. For example, almost all fast-paced games require the player to press multiple buttons at once, in this way, in the case of a touchscreen, meaning multi-touch.

Apple introduced touch event api,android in iOS 2.0 and is catching up to this fact standard to narrow the gap. A recent work group is working together to develop this touch event specification.

In this article, I'll delve into the touch event APIs provided by iOS and Android devices, explore what types of applications can be built, give some best practices, and talk about some of the things that make touch-enabled applications (touch-enabled application) has made it easier to develop useful techniques.

Touch events
There are three basic touch events that are listed in the specification and have been widely implemented across mobile devices:

1. Touchstart: Place your finger on a DOM element.
2. Touchmove: Drag a DOM element with your finger.
3. Touchend: Move the finger away from a DOM element.

Each touch event includes three touch lists:

1. Touches: A list of all the fingers that are currently on the screen.
2. Targettouches: A list of the fingers that are located on the current DOM element.
3. Changedtouches: A list of fingers that involve the current event.

For example, in a Touchend event, this would be a moving finger.

These lists consist of objects that contain touch information:

1. Identifier: A numeric value that uniquely identifies the current finger in a touch session.
2. The Target:dom element is the target of the action.
3. Client/page/screen coordinates: The position where the action takes place on the screen.
4. Radius coordinates and RotationAngle: Draw an ellipse roughly equivalent to the shape of a finger.

Touch-controlled applications
The Touchstart, Touchmove, and touchend events provide a rich set of features to support almost any type of touch-based interaction-including common multi-touch gestures such as pinch-and-zoom, rotation-wait.

The following code allows you to drag a DOM element around using a single-finger touch:

var obj = document.getElementById (' id ');
Obj.addeventlistener (' Touchmove ', function (event) {
If there's only one finger in the position of this element,
if (event.targetTouches.length = = 1) {
var touch = event.targettouches[0];
Place the element where the finger is located
Obj.style.left = Touch.pagex + ' px ';
Obj.style.top = touch.pagey + ' px ';
}
}, False);

Here is an example that shows all the current contacts on the screen, and it is used to feel the responsiveness of the device.

Set up the canvas and expose the context through the CTX variable
Canvas.addeventlistener (' Touchmove ', function (event) {
for (var i = 0; i < event.touches.length; i++) {
var touch = event.touches[i];
Ctx.beginpath ();
Ctx.arc (Touch.pagex, Touch.pagey, 0, 2*math.pi, true);
Ctx.fill ();
Ctx.stroke ();
}
}, False);

Demonstrate

There are lots of interesting multi-touch demos everywhere, such as the canvas-based painting demos that Paul Irish and others have implemented.

and browser Ninja, a technical demonstration, is a fruit Ninja clone that uses CSS3 transformations, transitions, and canvases.

Best practices
Block scaling

The default Multitouch settings are not particularly useful because your swipe and gestures are often associated with the behavior of your browser, such as scrolling and zooming.

To disable the zoom function, use the following meta tag to set your view area (viewport) so that it is not scalable for the user:

Content= "Width=device-width, initial-scale=1.0, User-scalable=no" >

Read this article on moving HTML 5 to learn more about the view area settings.

Prevent scrolling

Some mobile devices have default Touchmove behavior, such as the classic iOS Overscroll effect, which causes a view bounce when scrolling beyond the bounds of the content. This can be confusing in many multitouch applications, but it's easy to disable it.

Document.body.addEventListener (' Touchmove ', function (event) {
Event.preventdefault ();
}, False);

Careful rendering

If you're writing a multi-touch app that involves complex multi-fingered gestures, be careful about how you respond to touch events because you're dealing with so many things at once. Consider the example of drawing all the contacts on the screen in the previous section, which you can draw as soon as you have touch input:

Canvas.addeventlistener (' Touchmove ', function (event) {
Rendertouches (event.touches);
},

However, this technique does not have to be expanded with the number of fingers on the screen, instead, you can keep track of all your fingers and then render them in a loop to get better performance:

var touches = []
Canvas.addeventlistener (' Touchmove ', function (event) {
touches = event.touches;
}, False);

Set a timer of 60 frames per second
Timer = setinterval (function () {
Rendertouches (touches);
}, 15);

Tip: SetInterval is not suitable for animations because it does not take into account the browser's own rendering cycle. Modern desktop browsers offer the Requestanimationframe function, which is a better choice based on performance and battery working time reasons. Once the browser provides support for the function, it will be the preferred way to handle things.
Using Targettouches and Changedtouches

One thing to keep in mind is that event.touches is an array of all the fingers that touch the screen, not just those located on the target DOM element. You may find it more useful to use event.targettouches and event.changedtouches instead of event.touches.

Finally, since you are developing for mobile devices, you should be mindful of the best practices for mobile, which are addressed in Eric Bidelman's articles, as well as understanding this document.

Device Support
Unfortunately, the implementation of touch events varies greatly in terms of completeness and quality. I have written a diagnostic script to show some basic information about the touch API implementation, including which events are supported, and the Touchmove event-triggered solution. I tested Android 2.3.3 on Nexus One and Nexus S hardware, tested Android 3.0.1 on the Xoom, and tested iOS 4.2 on ipad and iphone.

In short, all tested browsers support Touchstart, Touchend, and Touchmove events.

The specification provides an additional three touch events, but the browser being tested does not support them:

1. Touchenter: Move the finger into a DOM element.
2. Toucheleave: Move your finger away from a DOM element.
3. Touchcancel: Touch interrupted (Implementation specification).

The tested browser also provides a list of touches, targettouches, and changedtouches within each touch list. However, the browser being tested does not support RADIUSX, RadiusY, or RotationAngle properties, which indicate the shape of the finger touching the screen. During a touchmove, the event is triggered about 60 times a second, as is the case with all the tested devices.
Android 2.3.3 (Nexus)

Android's Gingerbread browser (tested on Nexus One and Nexus S) does not support multi-touch, which is a known issue.
Android 3.0.1 (Xoom)

The Xoom browser has a basic support for multi-touch, but only works on a single DOM element. The browser does not respond correctly to two touches that occur simultaneously on different DOM elements, in other words, the following code responds to two simultaneous touches:

Obj1.addeventlistener (' Touchmove ', function (event) {
for (var i = 0; i < event.targettouches; i++) {
var touch = event.targettouches[i];
Console.log (' touched ' + touch.identifier);
}
}, False);

However, the following code does not:

var objs = [Obj1, obj2];
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
Obj.addeventlistener (' Touchmove ', function (event) {
if (event.targetTouches.length = = 1) {
Console.log (' touched ' + event.targettouches[0].identifier);
}
}, False);
}
IOS 4.x (IPad, IPhone)

The iOS device fully supports multi-touch, keeps track of multiple fingers, and provides a very sensitive touch experience in the browser.

Developer Tools
In mobile development, it is easier to start prototyping on the desktop and then process the mobile-specific parts on the devices that you intend to support. Multi-Touch is one of those features that is difficult to test on a PC because most PCs do not have touch input.

Testing that has to be done on a mobile device may lengthen your development cycle, because every change you make requires that the code be submitted to the server and then loaded onto the device. Then, once run, there's not much debugging on the app, because tablets and smartphones lack the tools that Web developers use.

One solution to this problem is to simulate triggering events on the development machine. For single touch, touch events can be simulated based on mouse events. If you have a touch input device, such as a modern app MacBook, then multi-touch can also be simulated.

Single Touch events

If you want to simulate a single touch event on your desktop, try Phantom Limb, which simulates touch events on a Web page and provides a giant hand to guide it.

There's also touchable, a jquery plugin that unifies touch and mouse events across platforms.

Multi-Touch events

To make your multi-touch web app work on your browser or multi-touch trackpad, such as Apple MacBook or Magicpad, I created this magictouch.js fill tool that captures touch events from the trackpad and then converts them into standard-compatible touch events.

1. Download the nptuioclient Npapi plugin and install it into the ~/library/internet plug-ins/directory.

2. Download the Tongseng Tuio app for this Mac Magicpad and start the server.

3. Download the magictouch.js JavaScript Library to emulate the specification-compliant touch events based on the Nptuioclient callback.

4. Include the Magictouch.js script and the Nptuioclient plugin in your app as follows:

< head>
...
< script src= "/path/to/magictouch.js" kesrc= "/path/to/magictouch.js" ></script>

< body>
...
< object id= "Tuio" type= "Application/x-tuio" style= "width:0px; height:0px; " >
Touch Input plugin failed to load!
</object>
</body>

I only tested this method on Chrome 10, but it should be able to work on other modern browsers as long as you tweak it a little bit.

If your computer does not have multi-touch input, you can use other Tuio trackers, such as reactivision, to simulate touch events. For more information, please refer to the Tuio project page.

One thing to note is that your gestures can be the same as the OS level multi-touch gestures. On OS X, you can configure system-wide events by entering the trackpad preferences layout in System Preferences.

With the multi-touch feature gradually getting wide support across mobile browsers, I'm delighted to see the new Web App take full advantage of this rich API.

JS development of multi-touch screen browser