触摸事件：用户手指放在屏幕上面的时候，在屏幕上滑动的时候或者是屏幕上移开的时候触发；
主要的事件有：
touchstart事件：当手指触摸屏幕的时候触发， 及时 有一个手指放在屏幕上也会触发；
touchmove事件：当手指在屏幕上滑动的时候触发，是一个持续的过程，在触发事件的过程中 可以调用preventDefult（)方法阻止滚动；
touchend事件： 当手指从屏幕上移开的时候触发；
touchcancel事件：当系统停止跟踪触摸的时候触发， 比如 来电话 或者短信 或者其他的提醒的时候 会打断touchmove事件；
这些事件都会冒泡，也都可以取消，
每个触摸事件的event对象都提供了鼠标常见的属性：
bubbles（起泡类型的类型）；cancelable（是否用preventDefault（）方法可以取消与事件关联的默认事件）；
触摸事件的event对象的几个重要的属性：
touches： 保存当前屏幕上的手指对象（当前跟踪的触摸操作的touch对象的数组）；
targetTouches：保存当前绑定元素上的手指对象；（事件目标的touc对象的数组）；
changeTouches：保存状态改变的手指的对象；
Paste_Image.png
注：移动端绑定事件不允许使用on的方法，必须使用addEventlistener 监听事件
手指在屏幕上触摸， 会产生TouchEvent对象，触摸点的信息会保存在targetTouches这个属性中，如果多点触摸，则这个属性会存放多个Touch对象，每一个Touch对象都代表一个触摸点信息；
demo ：
当触发touchstart事件的时候 出现一个红色的圆 触发touchmove事件的时候 跟随鼠标移动， 触发touchend的时候 圆消失；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Document</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
#box{
width: 50px;
height: 50px;
border-radius: 50%;
background: red;
display: none;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
var box = document.querySelector('#box');
document.addEventListener('touchstart',function(e) {
console.log(e);
box.style.display = 'block';
var touch = e.changedTouches[0];
box.style.left = touch.pageX - box.offsetWidth/2 + 'px';
box.style.top = touch.pageY - box.offsetHeight/2+ 'px';
var getComputedStyle = getComputedStyle || function(ele) {
return ele.currentStyle;
}
});
document.addEventListener('touchmove',function(e){
var touch = e.changedTouches[0];
box.style.left = touch.pageX - box.offsetWidth/2 + 'px';
box.style.top = touch.pageY - box.offsetHeight/2+ 'px';
var getComputedStyle = getComputedStyle || function(ele) {
return ele.currentStyle;
}
} );
document.addEventListener('touchend', function(e) {
box.style.display = 'none';
})
</script>
</body>
</html>
下面为大家介绍一个手势事件库：
百度云手势事件库： 实现了WebAPP在触屏设备上的手势识别与事件管理功能。
file:///C:/Users/Administrator/Desktop/day-7/touch.code.baidu.com-master/index0.html
语法：
touch.on('.div','tap',function(e){//参数; 参数1 选择器 参数2 事件的名称 参数 事件处理函数
console.log(e);
})
百度touch.js 事件类型： tap（轻拍） doubletap（双击） hold（长按） swipe（滑动）swipeleft（左滑） swiperight （右滑） swipeup（上滑） swipedown（下滑） rotate （旋转） pinch（缩放） pinchin（向内） pinchout（向外）
Paste_Image.png
未完待续......
网友评论