移动端事件详解

关于移动端事件的一些笔记

移动端事件类型

  1. touchstart事件
  2. touchmove事件
  3. touchend事件

移动端事件对象

  1. touches 屏幕上有几个触点
  2. targetTouches 绑定事件的元素上有几个触点
  3. changedTouches 在屏幕上 改变(位置移动 离开 进入 )的触点的个数(如果手指离开屏幕 只有changedTouched有值 其他都没有)

获取触点坐标

  1. clientX/Y获取的是, 触点相对于可视区的X/Y坐标(不包含滚动)(用的最多)
  2. pageX/Y获取的是 , 触点相对于HTML文档左边沿的的X/Y坐标(包含滚动)
  3. screenX/Y获取的是返回触点相对于屏幕左边沿的的X/Y坐标.不包含页面滚动的(screenX/Y有兼容性)
  4. 细节: 如果想要clientX/YpageX/Y正确的结果,要写全viewport设置,如果写不全,那么不会得到正确的结果

300ms延迟

  1. 形成原因:曾经移动端在萌芽阶段的时候,我们把PC端的网页放到了移动端,苹果公司把PC端的网页进行了缩放,发明了一种浏览缩放网页的处理方案 ,就是双击放大,第一次点击会延迟300ms左右,然后判断,如果有第二次点击,就是放大,如果没有,就是点击
  2. console.time(“timer”)计时器开
  3. console.timeEnd(‘timer’)计时器关
  4. 解决方法:
  5. 写上 viewport 设置就可以了
  6. 用fastClick

移动端判断手指滑动方向

  1. 获取到 触点起始点坐标
  2. 获取到 触点 结束点坐标
  3. 计算 坐标的差值的绝对值
  4. 如果 水平坐标的差值的绝对值 大于竖直 就是水平滑动
  5. 如果 终止点坐标减去起始点坐标大于0 那么是向 右 否则是向左滑
  6. 如果 竖直坐标的差值的绝对值 大于水平 就是竖直滑动
  7. 如果 终止点坐标减去起始点坐标大于0 那么是向 下 否则是向上滑
  8. 代码如下:<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

1182
来自专栏前端杂货铺

翻译:如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

3736
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

1963
来自专栏十月梦想

layerX/layerY与offsetX/offsetY区别

        layerX/layerY与offsetX/offsetY获取事件源于鼠标作用的位置信息

1465
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明。 1. 文本控件 (1)...

3524
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

1255
来自专栏Android小菜鸡

自定义View学习之路(三)————验证码的实现

走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的验证码为例。开始系统的学习View的绘制。 验证码需求:

1021
来自专栏hbbliyong

基于Three.js的360度全景--photo-sphere-viewer--简介

这个是基于three.js的全景插件  photo-sphere-viewer.js  ————————————————————————————————————...

5819
来自专栏大数据钻研

前端开发面试题总结之——CSS3

---- 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子...

3424
来自专栏Micro_awake web

谈谈CSS中一些比较"偏门"的小知识 前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!

前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获! 1.常见的浏览器...

2026

扫码关注云+社区