Web Touch Events

First, touch events
Ontouchstart
Ontouchmove
Ontouchend
Ontouchcancel

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

/*** ontouchevent*/
var div = document.getElementById ("div");
Touchstart similar to MouseDown
Div.ontouchstart = function (e) {
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
Since we have only one touch, direct pointing [0]
var touch = e.touches[0];
Gets the coordinates of the current touch point, equivalent to the clientx/clienty of the MouseEvent event
var x = Touch.clientx;
var y = touch.clienty;
};
Touchmove similar to MouseMove
Div.ontouchmove = function (e) {
Touchstart, Touchmove events can be added with Preventdefault to prevent browser zoom, scroll bar scrolling, etc. when touching
E.preventdefault ();
};
Touchend similar to MouseUp
Div.ontouchup = function (e) {
Nothing to do
};

Three, Gravity induction

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:
0: Same orientation as page first load
-90: In the original direction clockwise turn 90°
180: Turn 180°
90: Counterclockwise Turn 90°

Test, 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. Not tested in other environments.

The above is reproduced. Here's an example of an electronic reading I'm doing.

1) swipe with finger, area to slide <div id= "#roll" ontouchmove= "Tmove (event)" ></div>

<script type= "Text/javascript" >
var u = $ (' #roll ');
function Tmove (Evet) {
var touch = evet.touches[0];
var x = Touch.clientx;
var y = touch.clienty;
var = $ ("#roll"). CSS ("left");

$ ("#roll"). Animate ({left: " -264px"},1000);

Evet.preventdefault ();
}

</script>

2) <div id= "#roll" ontouchend= "tend (event)" ontouchstart= "Tstart" (event) "When the finger slips away and triggers the area to be slid" ></div>

var down = 0;
var up = 0;
var index=0;
var w = 64;
function Tstart (event)
{
down=event.changedtouches[0].pagex;//gets the x-coordinate of the finger when it's just touched
}
function tend (event)
{
up=event.changedtouches[0].pagex;//gets the x-coordinate of the finger when it leaves
Ul_obj = $ ("#roll");
if (down>up)
{//Left
$ ("#roll"). Animate ({left: (index+ "px")},1000);
index = index-64<=-180?-180:index-w;
}
else if (down<up)
{//Right
$ ("#roll"). Animate ({left: ((index+w) + "px")},1000);
index = index+64>0?0:index+w;
}
}

3) There are e-books and some of the use of drops ~ to help memory ~

3.1) Clear the text box:

$ ("input"). attr ("Value", "");

3.2) Setintervar (function () {},1000) sets the automatic carousel diagram

SetInterval (function () {
if (I > $ ('. IMG ul li img '). length–2)
{
i = 0;
$ ('. Dot a '). Removeclass (' at '). EQ (i). addclass (' at ');
}
else{
i++;
$ ('. Dot a '). Removeclass (' at '). EQ (i). addclass (' at ');
}
$ ('. IMG ul '). Animate ({left:-300*i},1000)

},2000);

3.3) SetTimeout (function () {},1000) to trigger an event after a certain amount of time has been set

SetTimeout (function () {
$ (' #feedOk '). Hide ();

$ ("#read a"). html ("Download successful! ”);
Document.location.href= "index.html";
},2000);

3.4) Back to previous page

<a href= "Javascript:history.back ()" class= "Back" ></a>

Web Touch Events