移动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>
|