English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In mobile development, one easier approach is to start with prototyping on the desktop and then handle the mobile-specific parts on the devices you intend to support. Multi-touch is one of the functions that are difficult to test on a PC, because most PCs do not have touch input.
Testing that has to be done on mobile devices may extend your development cycle, because every change you make requires you to commit the code to the server, then load it onto the device. Then, once it is running, there is not much debugging of the application, as tablets and smartphones are very lacking in the tools used by web developers.
One solution to this problem is to simulate trigger 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, multi-touch can also be simulated.
Single-touch events
If you want to simulate single-touch events on the desktop, try Phantom Limb, which simulates touch events on the web and provides a giant hand to guide.
In addition, there is the Touchable jQuery plugin, which unifies touch and mouse events across platforms
Multi-touch events
To make your multi-touch web application work on your browser or multi-touch tablet (such as Apple MacBook or MagicPad), I created this MagicTouch.js fill tool that captures touch events from the tablet and then converts them into standard compatible touch events.
1. Download the npTuioClient NPAPI plugin and install it to ~/Library/Internet Plug-Ins/directory.
2. Download this TongSeng TUIO application for Mac MagicPad and start this server.
3. Download the MagicTouch.js JavaScript library to simulate touch events compatible with the npTuioClient callback specification.
4. Include the magictouch.js script and npTuioClient plugin in your application in the following manner:
< head> ... < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script> object> /head> < body> ... < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;"> tuio" style="width: 0px; height: 0px;"> object> /Touch input plugin failed to load! object> /<
body> 10I only tested it in Chrome
We tested this method, but with a slight adjustment, it should work on other modern browsers.
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 point to note is that your gestures can be the same as the multi-touch gestures at the OS level. On OS X, you can configure system-wide events by going to the Trackpad preference pane in System Preferences.
With the gradual widespread support of multi-touch functionality across mobile browsers, I am very pleased to see that new web applications are fully utilizing this rich API.5Original source: html
rocks.com-Original title: Developing for Multi
Touch Web Browsers
First, touch events on mobile phones
touchstart //Basic events:
Triggered when the finger just touches the screen //touchmove
touchend //Triggered when the finger moves on the screen
Triggered when the finger is moved off the screen //Below this is less commonly used: touchcancel
Triggered when the touch process is canceled by the system
Each event has the following list, for example, the targetTouches of touchend is of course 0: //touches
List of all fingers located on the screen //targetTouches
List of all fingers located on the element //changedTouches
List of all fingers involved in the current event
Among the coordinates, pageX, pageY are commonly used：
pageX //X coordinate relative to the page
pageY //Y coordinate relative to the page
clientX //X coordinate relative to the viewport
clientY //Y coordinate relative to the viewport
screenX //X coordinate relative to the screen
screenY //Y coordinate relative to the screen
identifier // The unique identifier of the current touch point
target //The DOM element touched by the finger
Other related events:
event.preventDefault（） //Prevent the browser from zooming and scrolling when touching
var supportTouch = "createTouch" in document //Determine if touch events are supported
Second, Example
The following is the specific implementation of the code to obtain different types of slides, combined with the ideas of predecessors, encapsulated and can be used for reference and learning:}
var touchFunc = function(obj,type,func) {
//The sliding range is5x5Click handling inside, s is start, e is end
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var sTime = 0, eTime = 0;
type = type.toLowerCase();
obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.sx;
init.ey = init.sy;
if(type.indexOf("start") !== -1) func();
}, false);
obj.addEventListener("touchmove",function() {
event.preventDefault();//Prevent the browser from zooming and scrolling when touching
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if(type.indexOf("move") !==-1) func();
}, false);
obj.addEventListener("touchend",function() {
var changeX = init.sx - init.ex;
var changeY = init.sy - init.ey;
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
//Left and right events
if(changeX > 0) {
if(type.indexOf("left") !==-1) func();
}else{}}
if(type.indexOf("right") !==-1) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
//Up and down events
if(changeY > 0) {
if(type.indexOf("top") !==-1) func();
}else{}}
if(type.indexOf("down") !=-1) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
//Click event, here to细分 according to the time difference
if((eTime - sTime) > 300) {
if(type.indexOf("long") !=-1) func(); //Long press
}
else {
if(type.indexOf("click") !=-1) func(); //When click handling
}
}
if(type.indexOf("end") !=-1) func();
}, false);
};
Reposted article:JS events on mobile touch screens
Handling Touch events allows you to track the position of each finger of the user. You can bind the following four Touch events:
1.touchstart: // Triggered when the finger is placed on the screen
2.touchmove: // Triggered when the finger moves on the screen
3.touchend: // Triggered when the finger is lifted off the screen
4touchcancel: // Triggered when the system cancels the touch event. As to when the system will cancel, it is not specified
Property
1.client / clientY:// Position of the touch point relative to the browser window viewport
2.pageX / pageY:// Position of the touch point relative to the page
3.screenX /screenY:// Position of the touch point relative to the screen
4.identifier: // Unique ID of the touch object
//touchstart event
function touchStartFunc(e) {
//evt.preventDefault(); //Prevent the browser from zooming, scrolling, etc. when the touch occurs
var touch = e.touches[0]; //Get the first touch point
var x = Number(touch.pageX); //X coordinate of the touch point on the page
var y = Number(touch.pageY); //Y coordinate of the touch point on the page
//Record the initial position of the touch point
startX = x;
startY = y;
}
//touchmove event
function touchMoveFunc(e) {
//evt.preventDefault(); //Prevent the browser from zooming, scrolling, etc. when the touch occurs
var touch = evt.touches[0]; //Get the first touch point
var x = Number(touch.pageX); //X coordinate of the touch point on the page
var y = Number(touch.pageY); //Y coordinate of the touch point on the page
var text = 'TouchMove event triggered: (' + x + ', ' + y + ';
//Determine the direction of sliding
if (x - if (x
//Swipe left and right
}
if (y - if (y != 0) {
//Swipe up and down
}
}
This is the second article reposted:Mobile Web Front-end Development Series: Event Handling (Part Two)
In the previous article, we talked about the basic events of html, in this article, we focus on explaining the touch events, the triggering conditions of touch events are when the finger contacts the screen, when the finger moves on the screen, or when the finger leaves the screen. The event is a collection of touches, it starts from the first time the finger is placed on the screen, and ends when the last finger leaves the screen. All touch operations during the process from the beginning to the end of the event are stored in the same event record.
touch events
touch events can be divided into single-touch and multi-touch, single-touch is generally supported on high-end machines, Safari2version, Android3version supports multi-touch, supporting up to5fingers touch the screen at the same time, ipad supports at most11fingers touch the screen at the same time, we can use the following event model to capture these events:
ontouchstart ontouchmove ontouchend ontouchcancel
When the user presses a finger on the screen, ontouchstart is triggered, when the user moves one or more fingers, ontouchmove is triggered, and when the user removes the finger, ontouchend is triggered. When is ontouchcancel triggered? When some higher-level events occur, such as alert, an incoming call, or a push message notification, the current touch operation is canceled, that is, ontouchcancel is triggered. When you are developing a web game, ontouchcancel is very important to you, and you can pause the game or save the game when ontouchcancel is triggered.
gesture events
The working principle of gesture events is the same as that of touch events, but gesture events are triggered only when there are at least two fingers on the screen, so Safari2version, Android3version supports, gestures have many advantages that can help us measure two-finger zoom and rotation operations, the event model is as follows:
ongesturestart ongesturechange ongestureend
Event Properties
Whether using touch or gesture events, you need to convert these events into individual touches to use them. For this, you need to access a series of properties of the event object.
targetTouches all current touches of the target element changedTouches all latest changed touches on the page touches all touches on the page
changedTouches, targetTouches, and touches contain slightly different touch lists. targetTouches and touches contain the list of fingers currently on the screen, but changedTouches only lists the last touch. If you are using touchend or gestureend events, this property is very important. In both cases, there will be no fingers on the screen, so targetTouches and touches should be empty, but you can still understand the last thing that happened by looking at the changedTouches array.
Since touch properties will generate an array, you can use JavaScript array functions to access them. This means that event.touches[0] will return the first touch, and you can use event.touches.length to calculate the current number of stored touches.
When viewing a single touch, you can also access other touches by using event.targetTouches[0], each touch will contain some specific information,
clientX, clientY are relative to the X or Y position of the current screen, pageX, pageY are relative to the X or Y position of the entire page, screenX, screenY are relative to the X or Y position of the user's computer screen, identifier is the unique identifier of the event, target is the object that generates the touch target.
Gesture event objects have two additional properties compared to ordinary touch events: rotation, the rotation angle of the finger, and scale, the zoom value.
Reprinted article:JavaScript touch and gesture events
To convey some special information to developers, iOS Safari adds some proprietary events. Since iOS devices do not have a mouse or keyboard, conventional mouse and keyboard events are not enough when developing interactive web pages for mobile Safari. With the addition of WebKit in Android, many of these proprietary events have become de facto standards.
1. touch events
includes iOS2.0 software iPhone 3When G is released, it also includes a new version of the Safari browser. This new mobile Safari provides some new events related to touch (touch) operations. Later, browsers on Android also implemented the same events. Touch events will trigger when the user's finger is on the screen, sliding on the screen, or lifted off the screen. Specifically, there are several touch events.
touchstart: triggered when a finger touches the screen; it will also trigger even if there is already a finger on the screen.
touchmove: Triggered continuously when the finger slides on the screen. During this event, calling preventDefault() can prevent scrolling.
touchend: Triggered when the finger is lifted off the screen.
touchcancel: Triggered when the system stops tracking the touch. The exact triggering event for this event is not clearly stated in the documentation.
These events bubble and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a compatible DOM manner. Therefore, each touch event is not defined in the DOM specification, but they are implemented in a compatible DOM manner. Therefore, each touch event's event object provides the common properties found in mouse events: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey, and metaKey.
In addition to common DOM properties, touch events also include the following three properties used to track touches.
touches: an array of Touch objects representing the current tracked touch operations.
targetTouches: an array of Touch objects specific to the event target.
changeTouches: an array of Touch objects representing what has changed since the last touch.
Each Touch object contains the following properties.
clientX: X-coordinate of the touch target in the viewport.
clientY: Y-coordinate of the touch target in the viewport.
identifier: a unique ID representing the touch.
pageX: x-coordinate of the touch target on the page.
pageY: y-coordinate of the touch target on the page.
screenX: x-coordinate of the touch target on the screen.
screenY: y-coordinate of the touch target on the screen.
target: coordinates of the touched DOM node.
These properties can be used to track user screen touch operations. See the following example.
function handleTouchEvent(event) {
//only track one touch
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //prevent scrolling
output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
The above code tracks a single touch operation that occurs on the screen. For simplicity, information will only be output when there is one active touch operation. When the touchstart event occurs, the touch position information will be output to
within the element. When the touchmove event occurs, it cancels its default behavior, prevents scrolling (the default behavior of touch move is to scroll the page), and then outputs the change information of the touch operation. The touched event will output the final information about the touch operation. Note that when the touched event occurs, there are no Touch objects in the touched set, because there is no active touch operation; at this time, it must turn to use the changeTouchs set.
These events trigger on all elements of the document, so different parts of the page can be manipulated separately. When touching elements on the screen, the sequence of these events occurs as follows:
touchstart
mouseover
mousemove
mousedown
mouseup
click
touchend
Browsers that support touch events include iOS Safari, Android WebKit, beta Dolfin, OS6+including BlackBerry WebKit, Opera Mobile 10.1and the Phantom browser in LG's proprietary OS. Currently, only the iOS version of Safari supports multi-touch. 6+and Chrome also support touch events.
2. Gesture events
IOS 2Safari in .0 also introduced a set of gesture events. Gestures are generated when two fingers touch the screen, and gestures usually change the size of the displayed item or rotate the displayed item. There are three gesture events, as follows.
gesturestart:Triggered when one finger is already pressed on the screen and another finger touches the screen.
gesturechange:Triggered when the position of any finger touching the screen changes.
gestureend:Triggered when any finger is removed from the screen.
These events are triggered only when both fingers touch the event receiver. Setting an event handler on an element means that both fingers must be within the range of that element to trigger the gesture event (this element is the target). Since these events bubble, placing the event handler on the document can also handle all gesture events. At this time, the event target is the element within which both fingers are located.
There is a certain relationship between touch events and gesture events. When a finger is placed on the screen, a touchstart event is triggered. If another finger is placed on the screen, the gesturestart event is triggered first. If another finger is placed on the screen, the gesturestart event is triggered first, followed by the touchstart event based on that finger. If one or two fingers are sliding on the screen, a gesturechange event is triggered, but if any finger is removed, a gestureend event is triggered, followed by the touchend event based on that finger.
Like touch events, each gesture event's event object contains standard mouse event properties: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey, and metaKey. In addition, there are two additional properties: rotation and scale. The rotation property indicates the angle of rotation caused by the finger change, with a negative value indicating counterclockwise rotation and a positive value indicating clockwise rotation (this value starts from 0). The scale property indicates the change in the distance between the two fingers (for example, inward contraction will shorten the distance); this value starts from1It starts and grows as the distance increases and shrinks as the distance decreases.
Here is an example of using a gesture event:
function handleGestureEvent(event) {
var output = document.getElementById("output");
switch(event.type) {
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.ratation +",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale"+" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
Like the example of touching events demonstrated earlier, the code here simply associates each event with the same function and then outputs the relevant information of each event through the function.
That's all for this article, I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yelling Tutorial more.
Statement: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, does not undergo artificial editing, and does not bear relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)