您的位置：首页 > 移动开发

js 处理移动端触摸事件

2015-07-14 11:05 597 查看

在处理移动端的touch事件时，我们可以选择一些插件来处理，比如jquery ui touch punch.js 提供丰富的触摸效果，可以满足移动端的开发，

但是，有些移动端开发中，并不需要如此复杂的效果，例如我们只需知道滑动的距离，向左还是向右，我们可以自己写一些代码来处理touch事件；

以下代码，只在触摸情况下支持，电脑需要chrome模拟手机；

可以改造成自己需要的效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>touches</title>
<style>
body{ font-size:16px; color:red;}
#div1{width:100%;height:200px;background:#ccc;font-size:2em;}
</style>
<script>
var xc,yc,x1,x2,y1,y2;
function touches(ev){
if(ev.touches.length==1){

var oDiv=document.getElementById('div1');

switch(ev.type){
case 'touchstart':
//oDiv.innerHTML='Touch start('+ev.touches[0].clientX+', '+ev.touches[0].clientY+')';
ev.preventDefault();  //阻止出现滚动条

x1 = Math.floor(ev.touches[0].clientX);
y1 = Math.floor(ev.touches[0].clientY);
break;
case 'touchend':
//oDiv.innerHTML='Touch end('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')';
break;

case 'touchmove':
//oDiv.innerHTML='Touch move('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')';

x2 = Math.floor(ev.changedTouches[0].clientX);
y2 = Math.floor(ev.changedTouches[0].clientY);
xc = x2-x1;
yc = y2-y1;
oDiv.innerHTML='x移动了：'+xc+';y移动了'+yc;
break;
}

}
}
document.addEventListener('touchstart',touches,false);
document.addEventListener('touchend',touches,false);
document.addEventListener('touchmove',touches,false);
</script>

</head>
<body>
<div id="div1"></div>
<p>需要电脑模拟手机（chrome）</p>
</body>
</html>

另外，网上找了一些其他关于处理touch的事件教程：链接如下移动端touch事件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航