显示触摸时各种状态的实时坐标在屏幕中显示的演示demo代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>触摸</title>
</head>
<body>
<div id="touch" style="margin-top:50%;margin-left:20%;">在手机端模式打开</div>
<script>
function tou (){
//在网页中添加监听触摸开发、触摸中、触摸结束事件
document.addEventListener('touchstart',touch,false);
document.addEventListener('touchmove',touch,false);
document.addEventListener('touchend',touch,false);
//触摸事件调用的函数
function touch (event){
//event 当前的事件对象，包含当前事件的一些信息，比如：坐标信息
//var event = event || window.event 浏览器兼容
var event = event || window.event;
//获取id
var local = document.getElementById("touch");
//event.type 获取当前事件对象的类型
//event.touches[0] 事件对象中的第一个手指
// event.touches[0].clientX 事件对象中的第一个手指在客户端X坐标
//event.changedTouches[0].clientX 事件对象中触摸块改变的时候的坐标
switch(event.type){
case "touchstart":
local.innerHTML ="Touchstart (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
break;
case "touchmove":
event.preventDefault();
local.innerHTML ="Touchmove (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
break;
case "touchend":
local.innerHTML ="Touchend (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
break;
}
}
}
window.addEventListener('load',tou,false);
</script>
</body>
</html>
温馨提示：
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：duhaomu@163.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：duhaomu@163.com，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
