Mobile Web JS Touch-screen Event press to release swipe

Mobile Web JS touch screen event Press to release slide explain

First, touch events

Ontouchstart

Ontouchmove

Ontouchend

Ontouchcancel

The front mobile browser supports 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*/

12345678910111213141516171819

var div = document.getElementById("div");//touchstart类似mousedowndiv.ontouchstart = function(e){//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，从而可以通过touches获取多点触控的每个触控点//由于我们只有一点触控，所以直接指向[0]var touch = e.touches[0];//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientYvar x = touch.clientX;var y = touch.clientY;};//touchmove类似mousemovediv.ontouchmove = function(e){//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等e.preventDefault();};//touchend类似mouseupdiv.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>

1234567891011

<scripttype="text/javascript">var u = $(‘#roll‘);function tmove(evet){var touch = evet.touches[0];var x = touch.clientX;var y = touch.clientY;var left = $("#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>

1234567891011121314151617181920212223

vardown = 0;varup = 0;varindex=0;varw = 64;functiontstart(event){down=event.changedTouches[0].pageX;//获取手指刚触摸时的x坐标}functiontend(event){up=event.changedTouches[0].pageX;//获取手指离开时的x坐标ul_obj = $("#roll");if(down>up){//向左$("#roll").animate({left:(index+"px")},1000);index = index-64<=-180?-180:index-w;}elseif(down<up){//向右$("#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:

1234567891011121314151617181920

$("input").attr("value","");3.2 ) setIntervar(function（）{ }，1000) 设置自动轮播图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) 设置一定时间后触发事件setTimeout(function(){ $(‘#feedOk‘).hide();$("#read a").html(“下载成功！”);document.location.href="index.html";},2000);

3.4) Back to previous page

1	<a href="javascript:history.back()"class="back"></a>

Mobile Web JS Touch-screen Event press to release swipe