触屏已经是我们身边电子设备的常态了。触摸事件当然也是随着触屏的出现，用户使用最多的事件啦！ 难道使用触屏事件后，其他原来的鼠标事件就都不能用啦？当然不是，只不过不太适合移动端的开发。
一、触摸事件
1.该类事件会在用户手指放在屏幕上面时，在屏幕上滑动时，或从屏幕上移开时触发。具体来说有以下几个触摸事件：
- touchstart
当手指放在屏幕上触发。 - touchmove
当手指在屏幕上滑动时，连续地触发。 - touchend
当手指从屏幕上离开时触发。
2.当触摸事件发生时，往往还会伴随着以下几个属性：
- clientX：触摸目标在视口中的x坐标
- clientY：触摸目标在视口中的y坐标。
- pageX：触摸目标在页面中的x坐标。
- pageY：触摸目标在页面中的y坐标
- screenX：触摸目标在屏幕中的x坐标。
- screenY：触摸目标在屏幕中的y坐标。
3.移动端不想PC端，会出现多跟手指共同触摸屏幕的情况，此时touches就显得尤其重要，他表示的是当前触摸对象的touch对象的数组。
当一个手指触摸屏幕时，event.touches.length=1,
当两个手指触摸屏幕时，event.touches/length=2,
以此类推......
targetTouches是特定于事件目标的touch对象数组，因为touch事件是会冒泡的，所以利用这个属性指出目标对象。
4.事件的绑定
box.addEventListener("touchstart",function(){
console.log("你好");
},false);
addEventListener()方法用于向指定元素添加事件
语法： box.addEventListener(event,function,useCapture)
| 参数值 | |
|---|---|
| event | 必填，指定事件名，必须为字符串 |
| function | 必填，指定要事件触发时执行的函数 |
| useCapture | 选填，指定事件是否在捕获或冒泡阶段执行。默认为flase,是事件冒；：ture，是事件捕获 |
5.事件的解绑
box.removeEventListener("touchstart",fn1);
removeEventListener()用于向指定元素解绑事件
语法：box.removeEventListener(event,function)
| 参数值 | |
|---|---|
| event | 要解绑的事件 |
| function | 要解绑的函数 |
注：如果利用事件添加添加的事件。将来涉及到解绑的话，必须把对应的函数单独起一个名字
二、示例（淘宝轮播图）
1.思路
需求：触摸式轮播图
条件：1.每一张图片的宽度
2.当前图片的索引值
3.clientX
步骤：1.当手指按下时，记录手指按下时的坐标
2.当手指移动时，计算手指移动的距离，并且让对应ul跟着手指移动
3.当手指离开时，如果移动距离大于移动范围时，进行换图（通过索引值来换）
2.方向锁定问题
<script>
var banner=document.querySelector(".banner");
banner.addEventListener("touchstart",function(e){
var dir="";
//触摸开始时的x坐标
var x=e.targetTouches[0].clientX;
//触摸开始时的y坐标
var y=e.targetTouches[0].clientY;
function move(e){
//触摸移动时的x坐标
var divX=e.targetTouches[0].clientX;
//触摸移动时的x坐标
var divY=e.targetTouches[0].clientY;
if(dir==""){
//如果在水平方向移动的距离大于5px,则锁定为水平移动
if(Math.abs(divX-x)>5){
dir="left";
//如果在竖直方向移动的距离大于5px,则锁定为数竖直移动
}else if(Math.abs(divY-y)>5){
dir="top";
}
}else{
if(dir=="left"){
console.log("水平方向");
}else if(dir=="top"){
console.log("竖直方向");
}
}
}
//触摸移动时
banner.addEventListener("touchmove",move,false);
//定义一个名为fnEnd的函数
function fnEnd(){
//解绑touchmove事件
banner.removeEventListener("touchmove",move);
//解绑touchend事件
banner.removeEventListener("touchend",fnEnd);
}
//触摸移动结束时
banner.addEventListener("touchend",fnEnd,false)
},false)
</script>
在移动端写轮播图是要先进行方向的锁定，因为用户可能是要向下浏览网页，也可能是浏览轮播图
3.轮播图
<script>
var banner=document.querySelector(".banner");
var bannerUl=banner.querySelector("ul");
var bannerUlLi=bannerUl.querySelector("li");
var index=0;
banner.addEventListener("touchstart",function(e){
//触摸开始时的x坐标
var x=e.targetTouches[0].clientX;
//触摸开始时的y坐标
var y=e.targetTouches[0].clientY;
var dir="";
var dis="";
function fnMove(e){
//触摸移动时的x坐标
var divX=e.targetTouches[0].clientX;
//触摸移动时的x坐标
var divY=e.targetTouches[0].clientY;
if(dir==""){
if(Math.abs(divX-x)>5){
dir="0";
}else if(Math.abs(divY-y)>5){
dir="1";
}
}else{
if(dir==0){
dis=divX-x;
var num=-index*bannerUlLi.offsetWidth+dis;
bannerUl.style.transform="translateX("+num+"px)";
}
}
}
function fnEnd(){
//向左移动时进项的判定
if(dis<-50){
index==3?index=3:index++;
//向右移动时进项的判定
}else if(dis>50){
index==0?index=0:index--;
}
bannerUl.style.transition="all 0.5s";
bannerUl.style.transform="translate("+-index*bannerUlLi.offsetWidth+"px)";
banner.removeEventListener("touchmove",fnMove);
banner.removeEventListener("touchend",fnEnd);
}
banner.addEventListener("touchmove",fnMove,false)
banner.addEventListener("touchend",fnEnd,false);
},false)
</script>
示例为简易轮播图，并没有放图片，只是div的轮播。
轮播图在方向锁定的基础上进行编写。与前者相比多了向左或向右的判定、图片的宽度和动画的添加。
