| |
<!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> |
| |
div{ |
| |
width: 200px; |
| |
height: 200px; |
| |
background-color: red; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
|
| |
<div></div> |
| |
<script> |
| |
// 1. 有3个touch事件 |
| |
// 1. touchstart |
| |
// 2. touchmove |
| |
// 3. touchend |
| |
// 和鼠标的mousemove mouseleave mouseover 有点相似 |
| |
var div = document.querySelector('div'); |
| |
//手指触摸开始的时候触发的事件 |
| |
div.addEventListener('touchstart', function () { |
| |
console.log('touchstart'); |
| |
}); |
| |
//手指在屏幕上移动的时候触发的事件 |
| |
div.addEventListener('touchmove', function () { |
| |
console.log('touchmove'); |
| |
}); |
| |
//手指触摸结束 的时候触发的事件 |
| |
div.addEventListener('touchend', function () { |
| |
console.log('touchend'); |
| |
}); |
| |
|
| |
</script> |
| |
</body> |
| |
|
