移动端判断左右滑动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" />
<title>无标题文档</title>
</head>
<body>
<div id="div" style="width:500px;height:150px;border:1px solid red;"></div>
<script type="text/javascript">
(function (){
var i = 0
mobilwmtouch(document.getElementById("div"))
document.getElementById("div").addEventListener('touright',function (e){
e.preventDefault();
alert("方向向右");
i++;
document.getElementById("div").innerHTML = i;
});
document.getElementById("div").addEventListener('touleft',function (e){
alert("方向向左");
});
document.getElementById("div").addEventListener('toudown',function (e){
alert("方向向下");
});
document.getElementById("div").addEventListener('touup',function (e){
alert("方向向上");
});
function mobilwmtouch(obj){
var stoux,stouy;
var etoux,etouy;
var xdire,ydire;
obj.addEventListener("touchstart",function (e){
stoux=e.targetTouches[0].clientX;
stouy=e.targetTouches[0].clientY;
//console.log(stoux);
},false);
obj.addEventListener("touchend",function (e){
etoux=e.changedTouches[0].clientX;
etouy=e.changedTouches[0].clientY;
xdire=etoux-stoux;
ydire=etouy-stouy;
chazhi=Math.abs(xdire)-Math.abs(ydire);
//console.log(ydire);
if(xdire>0&&chazhi>0){
console.log("right");
//alert(evenzc('touright',alerts));
obj.dispatchEvent(evenzc('touright'));
}else if(ydire>0&&chazhi<0){
console.log("down");
obj.dispatchEvent(evenzc('toudown'));
}else if(xdire<0&&chazhi>0){
console.log("left");
obj.dispatchEvent(evenzc('touleft'));
}else if(ydire<0&&chazhi<0){
console.log("up");
obj.dispatchEvent(evenzc('touup'));
}
},false);
function evenzc(eve){
if (typeof document.CustomEvent === 'function') {
this.event = new document.CustomEvent(eve, {//自定义事件名称
bubbles: false,//是否冒泡
cancelable: false//是否可以停止捕获
});
if(!document["evetself"+eve]){
document["evetself"+eve]=this.event;
}
} else if (typeof document.createEvent === 'function') {
this.event = document.createEvent('HTMLEvents');
this.event.initEvent(eve, false, false);
if(!document["evetself"+eve]){
document["evetself"+eve]=this.event;
}
} else {
return false;
}
return document["evetself"+eve];
}
}
})()
</script>
</body>
</html>
