移动端常见的事件特效
程序员文章站
2022-03-29 08:13:24
...
触屏事件：
- touchstart：手指触碰到就触发。相当于onclick
- touchmove：滑动时触发，相当于mousemove
- touchend：移开时触发，相当于mouseleave，但是只触发一次
- touches：正在触摸屏幕手指的一个列表（包含手指个数及其位置等）
- targetTouches：正在触摸当前DOM元素上的手指列表。
- changedTouches：手指状态发生改变的列表，例如手指离开DOM，或者突然点击DOM，是一个从无到有，从有到无的过程！
如果touches和targetTouches都在DOM里面，则没用任何区别。
移动端拖动盒子案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
div{
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div");
var startx = 0, starty = 0;
var boxx = 0, boxy = 0;
div.addEventListener('touchstart',function (e) {
startx = e.targetTouches[0].pageX;//鼠标用page
starty = e.targetTouches[0].pageY;
boxx = this.offsetLeft;//盒子用offset。
boxy = this.offsetTop;
});
div.addEventListener('touchmove',function (e) {
startx = e.targetTouches[0].pageX - startx;
starty = e.targetTouches[0].pageY - starty;
this.style.left = boxx + startx + 'px';
this.style.top = boxy + starty + 'px';
});
</script>
</body>
</html>
下一篇： 移动端如何使用fidder代理访问测试