触摸列表 | 说明 |
---|---|
touches | 正在触摸屏幕的所有手指的一个列表 |
targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
changedTouches | 手指状态发生了改变的列表,从无到有,从有到无变化 |
e.touches正在触摸屏幕的所有手指的列表
e.targetTouches正在触摸当前dom元素的手指列表
e.changedTouches原来有现在没有或者原来没有现在有的手指列表
当我们手指离开屏幕时,就没有了touches和targetTouches列表
但是会有changedTouches
因为我们一半都是触摸元素,所以最经常使用的时targetTouches
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 800px;
height: 800px;
text-align: center;
font-size: 160px;
line-height: 800px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.addEventListener('touchstart', function (e) {
console.log(e); //正在触摸屏幕的所有手指的列表
})
div.addEventListener('touchend', function (e) {
// e.touches正在触摸屏幕的所有手指的列表
// e.targetTouches正在触摸当前dom元素的手指列表
// e.changedTouches原来有现在没有或者原来没有现在有的手指列表
// 当我们手指离开屏幕时,就没有了touches和targetTouches列表
// 但是会有changedTouches
// 因为我们一半都是触摸元素,所以最经常使用的时targetTouches
})
</script>
</body>
</html>