智能手机和平板甚至还有一些电脑屏幕自带触屏功能。所以页面就需要对触屏事件进行响应和反馈，不过一般js的触屏事件一般在移动的智能设备上都会添加的事件（touch）。
触摸事件
touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户的手指或者触控笔对屏幕或者触控板操作。
触屏事件常见如下：
| 触屏事件 | 描述 |
|---|---|
| touchstart | 手指触摸到第一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素滑动时触发 |
| touchend | 手指移开DOM元素时触发 |
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
.content{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
</div>
<script>
var ele=document.querySelector('.content') ;
ele.addEventListener('touchstart',function () {
console.log('你在触摸我');
})
ele.addEventListener('touchmove',function () {
console.log('你在不停的抚摸我');
})
ele.addEventListener('touchend',function () {
console.log('你离开了');
})
</script>
</body>
</html>
需要将浏览器模式调成手机模式,还有为了体现触摸的效果，需要按住鼠标左键，这样相当于手指或者触屏笔的按压。
触摸事件对象
触摸事件时描述手指在触摸屏幕的状态发生变化的事件。这类事件用于描述一个或多个触电，开发者可以检测出点的移动，出点的增加和减少等。
如果理解呢？你想想你用手触摸手机屏幕的时候，一般是一个手指，但是有时候你会无意中用两个手指触摸屏幕。
而三个事件touchstart，touchmove，touchend三个事件都会有各自的事件对象。
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
.content{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
</div>
<script>
var ele=document.querySelector('.content') ;
ele.addEventListener('touchstart',function (event) {
console.log('你在触摸我',event);
})
ele.addEventListener('touchmove',function (event) {
console.log('你在不停的抚摸我',event);
})
ele.addEventListener('touchend',function (event) {
console.log('你离开了',event);
})
</script>
</body>
</html>
单独看事件对象会发现很多属性：
其中重点需要了解的时三个常见属性：
| 事件属性 | 描述 |
|---|---|
| touches | 正在触摸屏幕的所有触摸点列表（这个监控的时整个屏幕） |
| targetTouches | 正在触摸当前DOM元素上手指列表（这个监控的时当前元素） |
| changedTouches | 手指状态发生了变化列表，简单的说从无到有或者从有到无。 |
因为用pc浏览器模拟，鼠标无法演示多个触点，所以上面三个属性都是现实只有一个：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
.content{
position: relative;
left: 0px;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
</div>
<script>
var ele=document.querySelector('.content') ;
// 获得元素的初始坐标
var x=0;
var y=0;
//获得鼠标触点的初始坐标
var starx=0;
var stary=0;
ele.addEventListener('touchstart',function (event) {
x=this.offsetLeft;
y=this.offsetTop;
var touch= event.targetTouches[0]
starx=touch.pageX;
stary=touch.pageY;
})
ele.addEventListener('touchmove',function (event) {
this.pr
var touch= event.targetTouches[0]
var endx=touch.pageX;
var endy=touch.pageY;
// 得到触点移动的距离
var movex=endx-starx;
var movey=endy-stary;
this.style.top=(y+movey)+'px';
this.style.left=(x+movex)+'px';
// 防止 屏幕的滑动
event.preventDefault();
})
</script>
</body>
</html>
