手指事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width"/>
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 100px;
height: 100px;
background: yellowgreen;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<html>
ontouchstart 手指触摸屏幕
<script>
var box=document.getElementById('box');
box.addEventListener('touchstart',function(){
console.log('111');
});
</script>
ontouchmove 手指在屏幕上发生移动
<script>
var box=document.getElementById('box');
box.addEventListener('touchsmove',function(){
console.log('222');
});
</script>
ontouchend 手指离开屏幕
<script>
var box=document.getElementById('box');
box.addEventListener('touchend',function(){
console.log('333');
});
</script>
手指列表
changedTouches 目标元素上目标事件上的手指列表
targetTouches 目标元素上的手指列表
touches 屏幕上的手指列表
<script type="text/javascript">
var box = document.getElementById('box');
box.addEventListener('touchend',function(event){
//手指距离视口的距离
//event.changedTouches[0].clientX;
//event.changedTouches[0].clientY;
console.log(event.changedTouches[0].clientX,event.changedTouches[0].clientY)
})
</script>
阻止默认行为
dom0
return false;
dom2
event.preventDefault();
阻止冒泡
event.stopPropagation();