移动web js触屏事件 按下 松开 滑动

移动web js触屏事件 按下 松开 滑动讲解

1、触摸事件

ontouchstart

ontouchmove

ontouchend

ontouchcancel 

 

前移动端浏览器均支持这4个触摸事件，包括IE。因为触屏也支持MouseEvent，所以他们的顺序是须要注意的：

 

touchstart → mouseover → mousemove → mousedown → mouseup → click1

 

/*** onTouchEvent*/

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var div = document.getElementById("div"); //touchstart相似mousedown div.ontouchstart = function(e){ //事件的touches属性是一个数组，其中一个元素表明同一时刻的一个触控点，从而能够经过touches获取多点触控的每一个触控点 //因为咱们只有一点触控，因此直接指向[0] var touch = e.touches[0]; //获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY var x = touch.clientX; var y = touch.clientY; }; //touchmove相似mousemove div.ontouchmove = function(e){ //可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等 e.preventDefault(); }; //touchend相似mouseup div.ontouchup = function(e){ //nothing to do };

 

3、重力感应

 

重力感应较简单，只须要为body节点添加onorientationchange事件便可。

 

在此事件中由window.orientation属性获得表明当前手机方向的数值。window.orientation的值列表以下：

 

0：与页面首次加载时的方向一致

-90：相对原始方向顺时针转了90°

180：转了180°

90：逆时针转了90°

 

测试，Android2.1还没有支持重力感应。以上即目前的触屏事件，这些事件还没有并入标准，但已被普遍使用。未在其余环境下测试。

 

//以上为转载。下面是偶在作电子阅读的实例

 

1）随手指滑动，须要滑动的区域<div id="#roll" ontouchmove="tmove(event)"></div>

 

1 2 3 4 5 6 7 8 9 10 11

< script  type = "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)"></div>

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var  down = 0; var  up = 0; var  index=0; var  w = 64; function  tstart(event) { down=event.changedTouches[0].pageX; //获取手指刚触摸时的x坐标 } function  tend(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; } else  if (down<up) { //向右 $( "#roll" ).animate({left:((index+w)+ "px" )},1000); index = index+64>0?0:index+w; } }

 

3)还有就是电子书别的一些用到滴~帮助记忆~

 

3.1 ) 清空文本框:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$( "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）返回上一页

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