触摸事件
touches 触摸屏幕的手指列表, targetTouches 目标元素上的手指列表
经常使用的是targetTouches
补充知识1
定义
一、clientX、clientY 点击位置距离当前body可视区域的x,y坐标。 可以理解为距离浏览器窗口的距离,但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。
二、pageX、pageY 对于整个页面来说,包括了被卷去的body部分的长度 相对于文档边缘,包含滚动条距离
三、screenX、screenY 点击位置距离当前电脑屏幕的x,y坐标
四、offsetX、offsetY 相对于带有定位的父盒子的x,y坐标
补充知识2
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
<style>
body{
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50px;
top:50px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
let btn =document.querySelector('div')
btn.addEventListener('click',function(e){
console.log(this.offsetLeft);
console.log(this.offsetTop);
console.log(this.offsetWidth);
console.log(this.offsetHeight);
})
</script>
</body>