Mobile Touch touch screen swipe event, swipe touch screen event monitoring!

<span id="Label3"></p><p><p><span style="font-size: 12px;"><strong>first, Touch Events</strong></span></p></p><p><p><span style="color: #0000ff;"><strong><span style="font-family: arial, helvetica, sans-serif;"><span style="font-size: 12px; line-height: 18px;">ontouchstart,</span> <span style="font-size: 12px; line-height: 18px;">ontouchmove,</span> <span style="font-size: 12px; line-height: 18px;">ontouchend,</span> <span style="font-size: 12px; line-height: 18px;">Ontouchcancel</span></span></strong></span></p></p><p><p><span style="font-size: 12px;">Currently mobile browsers support these 4 touch events, including Ie. Because the touchscreen also supports mouseevent, their order is important to note: Touchstart→mouseover→mousemove→mousedown→mouseup→click1</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;">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.</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong>second, the specification</strong></span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;">Here we introduce some of the more popular touch events, You can test this event in most modern browsers (must be a touchscreen device oh):</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;">touchstart</span>:</strong> trigger when Touch is started</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;">touchmove</span>:</strong> triggers when the finger slides on the screen</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;">touchend</span>:</strong> trigger at end of touch</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;">Each touch event includes three touch lists, each containing a series of touch points (for multi-touch):</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;">touches</span>:</strong> A list of all the fingers that are currently on the Screen.</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;">targettouches</span>:</strong> The list of fingers that are located on the current Dom Element.</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;">changedtouches</span>:</strong> A list that involves the finger of the current Event.</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;">Each touch point consists of the following touch information (commonly used):</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;">identifier</span>:</strong> A numeric value that uniquely identifies the current finger in a touch session. Usually starting from 0 serial number (android4.1,uc)</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;">target</span>:</strong> The DOM element, which is the target of the Action.</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;">///: a numeric value where the action takes place on the screen (page contains scrolling distance, client does not contain scrolling distance, screen is based on screens). <strong> <span style="font-family: arial, helvetica, sans-serif;"> <code>pageX</code> <code>pageX</code> <code>clientX</code> <code>clientY/screenX/screenY</code> </span></strong></span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;"><strong> <span style="font-family: arial, helvetica, sans-serif;"> <code>radiusX</code> / <code>radiusY/</code> rotationangle</span>:</strong> draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the Ellipse. Initial test browser does not support, fortunately the function is not commonly used, welcome feedback.</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;">With this information, we can provide users with different feedback based on these event Messages.</span></p></p><p><p><span style="font-size: 12px; font-family: 宋体;">below, I will show you a small demo, with touchmove implementation of Single-finger Drag:</span></p></p><pre><span style="color: #008000;"><span style="color: #008000;">/*</span></span><span style="color: #008000;">* <span style="color: #008000;">* Ontouchevent</span></span><span style="color: #008000;"><span style="color: #008000;"> */</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>div = document.getElementById ("div"<span style="color: #000000;"><span style="color: #000000;">);</span></span><strong><strong> <span style="color: #008000;">//</span><span style="color: #008000;">touchstart similar to MouseDown</span> </strong></strong>Div.ontouchstart =<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(e) {</span></span><span style="color: #008000;"><span style="color: #008000;"> //</span></span><span style="color: #008000;"><span style="color: #008000;">the touches property of an event is an array in which one element represents a touch point at the same time, so that each touch point of multitouch can be obtained through touches</span></span><span style="color: #008000;"><span style="color: #008000;"> //</span></span><span style="color: #008000;"><span style="color: #008000;">since we have only one touch, direct pointing [0]</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Touch = E.touches[0<span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008000;"><span style="color: #008000;"> //</span></span><span style="color: #008000;"><span style="color: #008000;">gets the coordinates of the current touch point, equivalent to the clientx/clienty of the MouseEvent event</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>x =<span style="color: #000000;"><span style="color: #000000;">touch.clientx;</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>y =<span style="color: #000000;"><span style="color: #000000;">touch.clienty;};</span></span><strong><strong> <span style="color: #008000;">//</span><span style="color: #008000;">touchmove similar to MouseMove</span> </strong></strong>Div.ontouchmove =<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(e) {</span></span><span style="color: #008000;"><span style="color: #008000;"> //</span></span><span style="color: #008000;"><span style="color: #008000;">touchstart, Touchmove Events can be added with Preventdefault to prevent browser zoom, scroll bar scrolling, etc. when touching</span></span><span style="color: #000000;"><span style="color: #000000;">E.preventdefault ();};</span></span><strong><strong> <span style="color: #008000;">//</span><span style="color: #008000;">touchend similar to MouseUp</span> </strong></strong>Div.ontouchup =<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">(e) {</span></span><span style="color: #008000;"><span style="color: #008000;"> //</span></span><span style="color: #008000;"><span style="color: #008000;"></span> nothing to do</span>};</pre><p><p></p></p><p><p><span style="font-size: 12px;"><strong>third, gesture Events</strong></span></p></p><p><p> <span style="font-size:12px;">       gesture refers to the use of multi-touch rotation, stretching and other operations, such as the enlargement, rotation of the Page. Gesture events are triggered when two or more fingers are required to touch simultaneously. One of the things we need to note about scaling is the position coordinates of the element: we usually get the position coordinates of the element using offsetx, getboundingclientrect, and so on, but in the mobile browser The page is often scaled in use, and the scaled element coordinates change? The answer is somewhat different. Use a scenario to illustrate the problem: after page A is loaded, JavaScript obtains the coordinates of the element in document (100,100), and then the user enlarges the page, and then outputs the coordinate of the element again with javascript, still (100,100), however, the Element's response area on the screen is offset based on the Scale. You can open that brick game demo, and then zoom in when the page is fully loaded, and you'll notice that even if your finger touches outside of the "touch here" area, you can control the ball board because the area is Offset. The offset will persist unless the page refreshes or the zoom is Restored. </span></p></p><pre><pre><span style="color: #008000;">/*</span> * <span style="color: #008000;">* Ongestureevent</span> <span style="color: #008000;"> */</span> <span style="color: #0000ff;">var</span> div = document.getElementById ("div"<span style="color: #000000;"></span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {</span><span style="color: #008000;"> //</span> <span style="color: #008000;"> Scale represents the magnification that the gesture produces, less than 1 is reduced, greater than 1 is magnified, and the original is 1</span><span style="color: #0000ff;"> var</span> scales =<span style="color: #000000;"> e.scale;</span> <span style="color: #008000;"> //</span><span style="color: #008000;">rotation represents the angle of the rotation gesture, value interval [0,360], positive clockwise rotation, negative value counterclockwise</span> <span style="color: #0000ff;"> var</span> angle = <span style="color: #000000;"> e.rotation;};</span></pre></pre><p><p></p></p><p><p><span style="font-size: 12px;"><strong>four, Gravity Induction</strong></span></p></p><p><p><span style="font-size: 12px;">Gravity Sensing is simpler, just adding onorientationchange events to the body Node. In this event, the Window.orientation property is given the value that represents the current Phone's Direction. The list of values for window.orientation is as Follows:</span><br><span style="font-size: 12px;">0: same orientation as page first load</span><br><span style="font-size: 12px;">-90: in the original direction clockwise turn 90°</span><br><span style="font-size: 12px;">180: Turn 180°</span><br><span style="font-size: 12px;">90: counterclockwise turn 90° as far as I am tested, Android2.1 has not yet supported gravity Sensing. These are the current touchscreen events that have not been incorporated into the standard but have been widely used. I Android2.1, did not test in other Environment.</span></p></p><p><p></p></p><p><p>Mobile Touch touch screen swipe event, swipe touch screen event monitoring!</p></p></span>