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

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

一、触摸事件

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
};


三、重力感应


重力感应较简单,只需要为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>


来源:http://hi.baidu.com/dandan_ze/item/50e45f96100ad04cf1421507


参考网站:http://blog.163.com/xz551@126/blog/static/821257972012722112636769/

http://www.zixuephp.com/html/javascript/2016_02/41609.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值