4.2Zepto之移动端Touch事件
程序员文章站
2022-05-03 18:05:24
...
移动端Touch事件
1.Zepto实现tap事件
虽然tap事件是Zepto自己封装的事件, 但是无论如何封装肯定都是通过原生JS来实现的
在原生的JS中专门为移动端新增了如下几个事件:
touchstart: 手指按下
touchmove: 手指在元素上移动
touchend : 手指抬起
注意点: 这几个事件只支持移动端, 不支持PC端
2.Touch事件对象
移动端的touch事件也是一个事件, 所以被触发的时候系统也会自动传递一个事件对象给我们
移动端touch事件对象中比较重要的三个子对象:
touches: 当前屏幕上所有手指的列表
targetTouches: 保存了元素上所有的手指列表
changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指
let oDiv1 = document.querySelector(".box1");
oDiv1.ontouchstart = function (event) {
console.log("touches1", event.touches);
console.log("targetTouches1", event.targetTouches);
}
oDiv1.ontouchend = function (event) {
console.log("touches2", event.touches);
console.log("targetTouches2", event.targetTouches);
}
- touches和targetTouches
如果都是将手指按到了同一个元素上, 那么这两个对象中保存的内容是一样的
如果是将手指按到了不同的元素上, 那么这个两个对象中保存的内容不一样
touches保存的是所有元素中的手指, 而targetTouches保存的是当前元素中的手指 - changedTouches
在ontouchstart中保存的是刚刚新增的手指
在ontouchend中保存的是刚刚离开的手指
3.Touch事件位置
- 1.screenX/screenY是相对于屏幕左上角的偏移位
- clientX/clientY是相对于可视区域左上角的偏移位
- pageX/pageY是相对于内容左上角的偏移位
<div></div>
<script>
let oDiv = document.querySelector("div");
oDiv.ontouchstart = function (event) {
console.log(event.targetTouches[0]);
console.log(event.targetTouches[0].screenX);
console.log(event.targetTouches[0].screenY);
console.log(event.targetTouches[0].clientX);
console.log(event.targetTouches[0].clientY);
console.log(event.targetTouches[0].pageX);
console.log(event.targetTouches[0].pageY);
}
</script>