移动端事件详解
关于移动端事件的一些笔记
移动端事件类型
- touchstart事件
- touchmove事件
- touchend事件
移动端事件对象
- touches 屏幕上有几个触点
- targetTouches 绑定事件的元素上有几个触点
- changedTouches 在屏幕上 改变(位置移动 离开 进入 )的触点的个数(如果手指离开屏幕 只有changedTouched有值 其他都没有)
获取触点坐标
- clientX/Y获取的是， 触点相对于可视区的X/Y坐标(不包含滚动)(用的最多)
- pageX/Y获取的是 ， 触点相对于HTML文档左边沿的的X/Y坐标(包含滚动)
- screenX/Y获取的是返回触点相对于屏幕左边沿的的X/Y坐标.不包含页面滚动的（screenX/Y有兼容性）
- 细节: 如果想要clientX/YpageX/Y正确的结果,要写全viewport设置,如果写不全,那么不会得到正确的结果
300ms延迟
- 形成原因：曾经移动端在萌芽阶段的时候，我们把PC端的网页放到了移动端，苹果公司把PC端的网页进行了缩放，发明了一种浏览缩放网页的处理方案 ，就是双击放大，第一次点击会延迟300ms左右，然后判断，如果有第二次点击，就是放大，如果没有，就是点击
- console.time(“timer”)计时器开
- console.timeEnd(‘timer’)计时器关
- 解决方法：
- 写上 viewport 设置就可以了
- 用fastClick
移动端判断手指滑动方向
- 获取到 触点起始点坐标
- 获取到 触点 结束点坐标
- 计算 坐标的差值的绝对值
- 如果 水平坐标的差值的绝对值 大于竖直 就是水平滑动
- 如果 终止点坐标减去起始点坐标大于0 那么是向 右 否则是向左滑
- 如果 竖直坐标的差值的绝对值 大于水平 就是竖直滑动
- 如果 终止点坐标减去起始点坐标大于0 那么是向 下 否则是向上滑
- 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1.声明变量
var startX, startY, endX, endY, absX, absY;
// 2.给document添加touchstart事件
document.addEventListener("touchstart", function (e) {
var touches = e.targetTouches[0];
startX = touches.clientX;
startY = touches.clientY;
// console.log(startX, startY);
})
// 3. 给document添加touchend事件
document.addEventListener("touchend", function (e) {
var touches = e.changedTouches[0];
endX = touches.clientX;
endY = touches.clientY;
// 4. 计算坐标差值的绝对值
absX = Math.abs(endX - startX);
absY = Math.abs(endY - startY);
if (absX == absY) {
return;
}
// 5. 判断是水平还是垂直
// 6. 如果是水平 判断左右
// 7.如果是垂直 判断上下
var direction = absX > absY ?
endX - startX > 0 ? "向右" : "向左" :
endY - startY > 0 ? "向下" : "向上";
console.log(direction);
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/06/21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录