HTML5触摸事件（touchstart、touchmove和touchend）（转）
中新添加了很多事件，但是由于他们的兼容问题不是很理想，应⽤实战性不是太强，所以在这⾥基本省略，咱们只分享应⽤⼴泛兼容不错的事件，⽇后随着兼容情况提升以后再陆续添加分享。今天为⼤家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
  ⼀开始触摸事件touchstart、touchmove和touchend是版Safari为了向开发⼈员传达⼀些信息新添加的事件。因为iOs设备既没有⿏标也没有键盘，所以在为移动Safari浏览器开发交互性⽹页的时候，PC端的⿏标和键盘事件是不够⽤的。
  在iPhone 3Gs发布的时候，其⾃带的移动Safari浏览器就提供了⼀些与触摸(touch)操作相关的新事件。随后，上的浏览器也实现了相同的事件。触摸事件(touch)会在⽤户⼿指放在屏幕上⾯的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下⾯具体说明：
  touchstart事件：当⼿指触摸屏幕时候触发，即使已经有⼀个⼿指放在屏幕上也会触发。
  touchmove事件：当⼿指在屏幕上滑动的时候连续地触发。在这个事件发⽣期间，调⽤preventDefault()事件可以阻⽌滚动。
  touchend事件：当⼿指从屏幕上离开的时候触发。
  touchcancel事件：当系统停⽌跟踪触摸的时候触发。关于这个事件的确切出发时间，⽂档中并没有具体说明，咱们只能去猜测了。
  上⾯的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的⽅式实现的。所以，每个触摸事件的event对象都提供了在⿏标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否⽤ preventDefault() ⽅法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，⿏标指针的⽔平坐标)、clientY(返回当事件触发时，⿏标指针的垂直坐标)、screenX(当某个事件被触发时，⿏标指针的⽔平坐标)和screenY(返回当某个事件被触发时，⿏标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下⾯三个⽤于跟踪触摸的属性。
  touches：表⽰当前跟踪的触摸操作的touch对象的数组。
  targetTouches：特定于事件⽬标的Touch对象的数组。
  changeTouches：表⽰⾃上次触摸以来发⽣了什么改变的Touch对象的数组。
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
通过⼀个例⼦来区分⼀下触摸事件中的这三个属性：
1. ⽤⼀个⼿指接触屏幕，触发事件，此时这三个属性有相同的值。
2. ⽤第⼆个⼿指接触屏幕，此时，touches有两个元素，每个⼿指触摸点为⼀个值。当两个⼿指触摸相同元素时，
targetTouches和touches的值相同，否则targetTouches 只有⼀个值。changedTouches此时只有⼀个值，
为第⼆个⼿指的触摸点，因为第⼆个⼿指是引发事件的原因
3. ⽤两个⼿指同时接触屏幕，此时changedTouches有两个值，每⼀个⼿指的触摸点都有⼀个值
4. ⼿指滑动时，三个值都会发⽣变化
5. ⼀个⼿指离开屏幕，touches和targetTouches中对应的元素会同时移除，⽽changedTouches仍然会存在元素。
6. ⼿指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有⼀个值，
此值为最后⼀个离开屏幕的⼿指的接触点。
  每个Touch对象包含的属性如下。
  clientX：触摸⽬标在视⼝中的x坐标。
  clientY：触摸⽬标在视⼝中的y坐标。
  identifier：标识触摸的唯⼀ID。
  pageX：触摸⽬标在页⾯中的x坐标。
  pageY：触摸⽬标在页⾯中的y坐标。
  screenX：触摸⽬标在屏幕中的x坐标。
  screenY：触摸⽬标在屏幕中的y坐标。
  target：触⽬的DOM节点⽬标。
clientX、offsetX、screenX、pageX、x的区别
  上⾯的属性光这么看，果然⾮常繁琐，每个属性说的都是那么的细致，只有真⼑实的来点⼩例⼦才能更加明⽩其中的奥妙。所以⼩例⼦如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
.text-box {
width:100%;
height:400px;
background: red;
/* position:absolute;
left:50px; */
}
.inner-bpx {
height: 100px;
width:100px;
background: blue;
margin: 60px;
}
</style>
</head>
<body>
<div class="text-box">
<div class="inner-bpx" id="inp">test</div>
</div>
<script>
function load (){
var oInp = ElementById("inp");
oInp.addEventListener('touchstart',touch, false);
oInp.addEventListener('touchmove',touch, false);
oInp.addEventListener('touchend',touch, false);
function touch (event){
event.stopPropagation();
var event = event || window.event;
pe){
case "touchstart":
oInp.innerHTML = "Touch started (" + uches[0].clientX + "," + uches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
// event.preventDefault();
oInp.innerHTML = "<br>Touch moved (" + uches[0].clientX + "," + uches[0].clientY + ")";
break;
}
}
}
window.addEventListener('load',load, false);
</script>
</body>
</html>
对上⾯的代码稍微做点改动，可以判断⽔平⽅向滑动的⽅向，然后左相应的动作，如下：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原⽣⽅式实现图⽚懒加载</title>
<style>
body {
text-align: center;
padding: 0;
margin: 0;
}
img {
width: 100%;
margin-bottom: 30px;
}
.info-text {
text-align: left;
padding: 10px;
}
</style>
</head>
<body>
<div id="imgBoxFrame" >
<div class="img-warpper">
<img  id='imgPic'>
</div>
<div class="info-text">
品牌: 纱⾮  <br/>
适⽤年龄: 30-34周岁 <br/>
尺码: M L XL 2XL <br/>
⾯料材质: ⽔貂 <br/>
⽑领型: POLO领 <br/>
风格: 街头 <br/>
街头: 欧美⾐ <br/>
门襟: 其他流⾏ <br/>
元素: ⽑领 <br/>
颜⾊分类: 红⾊⾦⾊⼗字貂蓝⾊⼗字貂银⾊⼗字貂⿊ <br/>
⽑领袖型: 喇叭袖 <br/>
</div>
</div>
<script src="./scroll.js"></script>
</body>
</html>
scroll.js
var allImgs = [{
src:'1.jpg',
info:'ssss'
},{
src:'2.jpg',
info:'ssss'
},{
src:'3.jpg',
info:'ssss'
},{
src:'4.jpg',
info:'ssss'
},{
src:'5.jpg',
info:'ssss'
},{
src:'6.jpg',
info:'ssss'
}];
function load(){
var currentIndex = 0, //当前显⽰哪张图⽚
direction;  //⼿滑动的时候，判断是往哪个⽅向
var oInp = ElementById("imgPic");
oInp.src= '../../imgs/'+allImgs[currentIndex].src;
oInp.addEventListener('touchstart',touch, false);
oInp.addEventListener('touchmove',touch, false);
oInp.addEventListener('touchend',touch, false);
function touchSuccessFun(){
pdf转htmlconsole.log(currentIndex);
switch(direction){
case 'ltr':
//从左往右
console.log('从左往右');
if(currentIndex==0) {
alert('已经是第⼀张了');
return;
}
currentIndex--;
break;
case 'rtl':
//从右往左
console.log('从右往左');
if(currentIndex==allImgs.length-1) {
alert('已经是最后⼀张了');
return;
}
currentIndex++;
break;
default:
console.log('点击事件');
break;
}
oInp.src= '../../imgs/'+allImgs[currentIndex].src;
};
function touch (event){
var event = event || window.event;
event.stopPropagation();
var distance='',minRange=10;
pe){
case "touchstart":
direction='';
clientX_uches[0].clientX;
break;
case "touchend":
touchSuccessFun();
break;
case "touchmove":
clientX_end = event.changedTouches[0].clientX;
//判断移动的⽅向
distance=clientX_end-clientX_start;
// distance > 0 && distance > minRange  - 从左往右
// distance < 0 && Math.abs(distance) > minRange
if(distance > 0 && distance>minRange) {
direction='ltr';
}
else if(distance < 0 && Math.abs(distance) > minRange){
direction='rtl';
}
break;
}
}
}
window.addEventListener('load',load, false);
---恢复内容结束---
　中新添加了很多事件，但是由于他们的兼容问题不是很理想，应⽤实战性不是太强，所以在这⾥基本
省略，咱们只分享应⽤⼴泛兼容不错的事件，⽇后随着兼容情况提升以后再陆续添加分享。今天为⼤家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
  ⼀开始触摸事件touchstart、touchmove和touchend是版Safari为了向开发⼈员传达⼀些信息新添加的事件。因为iOs设备既没有⿏标也没有键盘，所以在为移动Safari浏览器开发交互性⽹页的时候，PC端的⿏标和键盘事件是不够⽤的。
  在iPhone 3Gs发布的时候，其⾃带的移动Safari浏览器就提供了⼀些与触摸(touch)操作相关的新事件。随后，上的浏览器也实现了相同的事件。触摸事件(touch)会在⽤户⼿指放在屏幕上⾯的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下⾯具体说明：
  touchstart事件：当⼿指触摸屏幕时候触发，即使已经有⼀个⼿指放在屏幕上也会触发。
  touchmove事件：当⼿指在屏幕上滑动的时候连续地触发。在这个事件发⽣期间，调⽤preventDefault()事件可以阻⽌滚动。
  touchend事件：当⼿指从屏幕上离开的时候触发。
  touchcancel事件：当系统停⽌跟踪触摸的时候触发。关于这个事件的确切出发时间，⽂档中并没有具体说明，咱们只能去猜测了。
  上⾯的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的⽅式实现的。所以，每个触摸事件的event对象都提供了在⿏标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否⽤ preventDefault() ⽅法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，⿏标指针的⽔平坐标)、clientY(返回当事件触发时，⿏标指针的垂直坐标)、screenX(当某个事件被触发时，⿏标指针的⽔平坐标)和screenY(返回当某个事件被触发时，⿏标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下⾯三个⽤于跟踪触摸的属性。
  touches：表⽰当前跟踪的触摸操作的touch对象的数组。
  targetTouches：特定于事件⽬标的Touch对象的数组。
  changeTouches：表⽰⾃上次触摸以来发⽣了什么改变的Touch对象的数组。
  每个Touch对象包含的属性如下。
  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="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
.text-box {
width:100%;
height:400px;
background: red;
/* position:absolute;
left:50px; */
}
.inner-bpx {
height: 100px;
width:100px;
background: blue;
margin: 60px;
}
</style>
</head>
<body>
<div class="text-box">
<div class="inner-bpx" id="inp">test</div>
</div>
<script>
function load (){
var oInp = ElementById("inp");
oInp.addEventListener('touchstart',touch, false);