| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
| |
<title>Document</title> |
| |
<style> |
| |
*{ |
| |
margin: 0px; |
| |
padding: 0px; |
| |
} |
| |
div{ |
| |
width: 200px; |
| |
height: 200px; |
| |
margin-left: 100px; |
| |
background-color: #0f0; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
|
| |
<div></div> |
| |
<script> |
| |
// e event 就是事件的对象 存储一些触发事件的信息 |
| |
//TouchEvent 触摸事件对象 |
| |
//touches 是屏幕上的所有手指对象的集合 通常只获取一个手指touches[0] |
| |
//e.touches[0] 一个手指对象Touch对象 |
| |
//clientX 手指在视口的水平位置 |
| |
//clientY 手指在视口的垂直位置 |
| |
//changedTouches 获取的是改变后的手指的对象集合 changedTouches[0] |
| |
// 屏幕上从没有手指到有手指 这就是改变 获取有的时候的手指 |
| |
//屏幕上从从有手指到没有手指 也是改变 获取是没有的那一瞬间的手指 |
| |
var div = document.querySelector('div'); |
| |
//手指触摸开始的时候触发的事件 |
| |
div.addEventListener('touchstart', function (e) { |
| |
console.log('滑动开始的X'+e.touches[0].clientX); |
| |
console.log('滑动开始的Y'+e.touches[0].clientY); |
| |
}); |
| |
//手指在屏幕上移动的时候触发的事件 |
| |
div.addEventListener('touchmove', function (e) { |
| |
console.log('滑动中的X'+e.touches[0].clientX); |
| |
console.log('滑动中的Y'+e.touches[0].clientY); |
| |
}); |
| |
//手指触摸结束 的时候触发的事件 |
| |
div.addEventListener('touchend', function (e) { |
| |
//滑动结束后屏幕上不存在手指 获取不了手指对象获取不了位置 |
| |
// console.log('滑动结束的X'+e.touches[0].clientX); |
| |
// console.log('滑动结束的Y'+e.touches[0].clientY); |
| |
//e.changedTouches[0] 用来触摸结束的时候获取手指的位置 |
| |
console.log(e.changedTouches[0].clientX); |
| |
console.log(e.changedTouches[0].clientY); |
| |
}); |
| |
|
| |
</script> |
| |
</body> |
| |
</html> |
