一、手机触屏事件
1、各种事件
touchstart
当手指触摸到屏幕时触发
touchmove
手指在屏幕上移动时触发
touchend
手指离开屏幕时触发
touchenter
当触点进入某个 element 时触发。
touchleave
当触点离开某个 element 时触发。
touchcancel
当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：
由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。
触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。
当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。
2、在触屏时候产生的各种值
touches 当前位于手机屏幕上的所有手指列表
targetTouches 位于当前的元素上的手指的一个列表
changedTouches 涉及当前事件的手指列表
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。
下面是一个触屏滑动图片的实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no"> //实现在移动端能到运行的前提
<title>Document</title>
</head>
<style>
*{margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;} //一定要用overflow:hidden; 否则原来盒子就是默认可以滑动的
#div{
width:2560px;
height:400px;
position:relative;
left:0;
}
img{float:left;}
#icon{
width:200px;
height:25px;
margin:10px auto;
}
i{
display:block;
width:25px;
height:25px;
border-radius:50%;
border:1px solid red;
float:left;
margin-right:23px;
}
.curr{background:red;}
</style>
<body>
<div id="div">
<a href="http://www.baidu.com"><img src="img/1.jpg" width="640" height="400"></a>
<a href="http://www.baidu.com"><img src="img/2.jpg" width="640" height="400"></a>
<a href="http://www.baidu.com"><img src="img/3.jpg" width="640" height="400"></a>
<a href="http://www.baidu.com"><img src="img/4.jpg" width="640" height="400"></a>
</div>
<div id="icon">
<i class="curr"></i>
<i></i>
<i></i>
<i></i>
</div>
</body>
<script>
var div = document.getElementById("div");
var icons = document.getElementById("icon").children; //直接获取到它的儿子，和下面的代码作用一样
//var iS = icon.getElementsByTagName("i");
var x=0;
var startX = 0;//div的初始坐标
var scroll = 0;//拖动的距离
document.addEventListener("touchstart",function(e){ //触屏开始
x = e.changedTouches[0].pageX; //获取到当前手指的位置
startX = scroll; //这里是当触屏结束再次触屏时候，这时候上一次触屏所拉动后的位置就是这次拉动的起点
})
div.addEventListener("touchmove",function(e){ //触屏移动中
var xL = e.changedTouches[0].pageX - x; // xL 代表滑动了多少距离，用滑动后的位置减去滑动开始的位置
scroll = startX + xL; //在把滑动的距离+滑动开始的位置 就是已经滑动了多少
this.style.left = scroll +"px";
//console.log(scroll);
})
div.addEventListener("touchend",function(e){ //触屏结束
var xL = e.changedTouches[0].pageX - x;
scroll = startX + xL;
var n = -scroll/640; // 求出当前从一开始（第一张）滑动到现在（不算中间滑动了多少次） 占整体整个盒子的比例
//n%1 1.3%1 = 0.5
n = n%1<0.3?Math.floor(n):Math.ceil(n); //如果小求余小于0.3 如1.2 ，2.2 ，3.2.。。这些数值分别代表第二张滑动了占现在视口上的0.2 第三张滑动了占现在视口上的0.2 第四张滑动了占现在视口上的0.2 这样当拉超过整个画面0.3的时候，就可以直接滑动到下一页，否则又弹回本页面
if (n<0)
{
n = 0
}else if (n>3)
{
n = 3;
}
scroll = -n*640;
this.style.left = scroll+"px";
for ( var i=0;i<icons.length; i++) //这里是实现如果当前照片n值（其实就相当于序列号） 不和现在的循环中的 i （其实也相当于序列号）相同 ，那么就清 空class
{
if (i != n)
{
icons[i].className="";
}else
{
icons[i].className="curr";
}
}
this.style.transition = "0.5 linear";
})
</script>
</html>最后了解以下标签内的 date自定义值属性
设置属性方法：
div-dataset-name = “值” //name 这个名字可以随意改变是自定义的
div-dataset-name1-name2 = “值” //name 这个名字可以随意改变是自定义的
在js中获取到这些自定义值的方法如下面实例，可以弹出自定义里面的值
<div id="div" data-aaa="努力学习" data-aaa-bbb="好好学习天天向上">
</div>
alert(div.dataset.aaa);
alert(div.dataset.aaaBbb);
