移动前端javascript事件

事件：

[code lang=”js”]
// 手势事件
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel

// 触摸事件
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend

// 屏幕旋转事件
onorientationchange

// 检测触摸屏幕的手指何时改变方向
orientationchange

// touch事件支持的相关属性
touches
targetTouches
changedTouches
clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)
clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX　　　 // Relative to the screen
screenY 　　 // Relative to the screen
pageX　　　　// Relative to the full page (includes scrolling)
pageY　　　　 // Relative to the full page (includes scrolling)
target　　　　 // Node the touch event originated from
identifier　　 // An identifying number, unique to each touch event
[/code]

屏幕旋转事件:
[code lang=”js”]

// 判断屏幕是否旋转
function orientationChange() {
switch(window.orientation) {
　　case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
　　case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
　　case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
　　case 180:
　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
　　break;
};
};
// 添加事件监听
addEventListener(‘load’, function(){
orientationChange();
window.onorientationchange = orientationChange;
});
[/code]

双手指滑动事件：

[code lang=”js”]
// 双手指滑动事件
addEventListener(‘load’,　　function(){ window.onmousewheel = twoFingerScroll;},
false // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ，而后执行相应操作
return true;
};
[/code]

在互联网中，一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件，但是在移动前端，用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发，但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。
在移动端的手势事件一般有四种情况：
touchstart: 手指放到屏幕上的时候触发
touchmove: 手指在屏幕上移动的时候触发
touchend: 手指从屏幕上拿起的时候触发
touchcancel: 系统取消touch事件的时候触发。前三者应用很广泛，第四个应用较少。至今所做的项目中，第四项还没涉及过。如果有人用过，可以拿出来分享一下。

一个demo:
[code lang=”html”]
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=480" />
<head>
<style>
#stage{
width:480px;
height:360px;
overflow:hidden;
background-color: black;
}
#bg {
position:relative;
width:480px;
height:360px;
overflow:hidden;
background-color: red;
}

#phone {
position:absolute;
left:0px;
top:0px;
}
</style>
<title>360°旋转</title>
</head>
<body style="overflow:hidden;padding:0; margin:0;">
<div id="stage">
<div id="bg">
<img id="phone" src="images/360pic1.jpg" />
</div>
</div>
<span id="toleft">往左转</span>
<span id="toright">往右转</span>

//定义要360度旋转的对象
var main_swipe = document.getElementById_x("phone");

//创建滑动的基本距离和滑动方法属性。
var defaults = {
threshold: {
x: 10,
y: 30
},
swipeLeft: function() {showPicLeft();},
swipeRight: function() {showPicRight();},
};
//定义初始坐标
var originalCoord = { x: 0, y: 0 };
var shiftCoord = { x: 0, y: 0 };
var finalCoord = { x: 0, y: 0 };

main_swipe.addEventListener("touchstart",function(event) {

//定义滑动初始时的坐标
originalCoord.x = event.targetTouches[0].pageX;
originalCoord.y = event.targetTouches[0].pageY;
shiftCoord.x = event.targetTouches[0].pageX;
shiftCoord.y = event.targetTouches[0].pageY;
finalCoord.x = originalCoord.x;
finalCoord.y = originalCoord.y;

}, false);

main_swipe.addEventListener("touchmove",function(event) {

//定义滑动中的坐标
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX;
finalCoord.y = event.targetTouches[0].pageY;

//当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。
if(finalCoord.x – shiftCoord.x > 5){
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
shiftCoord.x = finalCoord.x;

}else if(finalCoord.x – shiftCoord.x < -5){

window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
shiftCoord.x = finalCoord.x;

}
}, false);

main_swipe.addEventListener("touchend",function(event) {

var changeY = originalCoord.y – finalCoord.y;

//滑动结束时，进行坐标判断。并执行向左或是向右的方法
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {

changeX = originalCoord.x – finalCoord.x;

if(changeX > defaults.threshold.x) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
}

if(changeX < (defaults.threshold.x*-1)) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
}
}
}
, false);

//向左滑动方法
var showPicLeft = function(){
c_i–;
if(c_i < 0){
c_i = 72;
};
document.getElementById_x("phone").src = c1[c_i].src;
}

//向右滑动方法
var showPicRight = function(){
c_i++;
if(c_i > 72){
c_i = 1;
};
document.getElementById_x("phone").src = c1[c_i].src;
}

var zidongleft;
var zidongright;
var panduanleft=false;
var panduanright=false;

//添加向左自动滑动功能
document.getElementById_x("toleft").addEventListener("touchstart",function(event){
window.clearInterval(zidongright);
if(panduanleft==false){
zidongleft=setInterval(function(){defaults.swipeLeft()},50);
}
panduanleft=true;
panduanright=false;
},false);

//添加向右自动滑动功能
document.getElementById_x("toright").addEventListener("touchstart",function(event){
window.clearInterval(zidongleft);
if(panduanright==false){
zidongright=setInterval(function(){defaults.swipeRight()},50);
}
panduanright=true;
panduanleft=false;
},false);

</script>
</body>
</html>
[/code]

代码中，定义了一个元素main_swipe，这个元素就是要进行手势操作的对象。
[code lang=”js”]
main_swipe.addEventListener("touchstart",function(event) {

}, false);
[/run]我们为这个对象添加监听事件，touchstart就是表示当手指刚放到屏幕上就触发，通过event对象我们可以获取当前触摸点的坐标。
即event.targetTouches[0].pageX; event.targetTouches[0].pageY;
其中event.targetTouches是一个包含触摸数据的数组。其默认的数组第一项就是当前的坐标集合。
通过event.targetTouches[0].pageX; event.targetTouches[0].pageY;
这样，我们就可以获取到当前触摸点的X和Y坐标。

接下来我们为了继续获取该元素的触摸移动中的坐标就要添加touchmove的事件。[code]
main_swipe.addEventListener("touchmove",function(event) {

//定义滑动中的坐标
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX;
finalCoord.y = event.targetTouches[0].pageY;

}else if(finalCoord.x – shiftCoord.x < -5){

window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
shiftCoord.x = finalCoord.x;

}
}, false);
[/code]
注意，在获取触摸移动中的坐标的时候，一定要先把浏览器的默认行为禁止 event.preventDefault();
触摸移动中的获取的坐标方法同触摸开始的方法是一样的。这里就不在继续阐述。
通过条件判断，当touchmove时的X坐标大于touchstart时的X坐标，则证明用户向右滑动，反之则向左滑动。
通过这个判断来执行defaults.swipeRight();或是defaults.swipeLeft();。从而实现360°旋转的功能。

当手指离开屏幕时，即touchend。同样要获取离开的坐标，以便为下一次touchstart来进行坐标定义。
[code lang=”js”]
main_swipe.addEventListener("touchend",function(event) {
var changeY = originalCoord.y – finalCoord.y;

//滑动结束时，进行坐标判断。并执行向左或是向右的方法
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {

changeX = originalCoord.x – finalCoord.x;

if(changeX > defaults.threshold.x) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
}

if(changeX < (defaults.threshold.x*-1)) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
}
}
}
, false);
[/code]

以上的效果，就是一个典型的touch手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途。

“移动前端javascript事件”的一个回复