移动端——touch事件
1.touchstart
当手指触碰屏幕时候触发
dom.addEventListener('touchstart',function(e){});
startX=e.touches[0].clientX;
事件返回的e
对象包含的移动端特有的属性:
targetTouches :目标元素的所有当前触摸
changedTouches:页面上最新更改的所有触摸
touches: 页面上所有的触摸
2.touchmove
手指在屏幕上滑动时连续触发
dom.addEventListener('touchmove',function(e){});
事件返回的e
对象包含的移动端特有的属性:
targetTouches :目标元素的所有当前触摸
changedTouches:页面上最新更改的所有触摸
touches: 页面上所有的触摸
3.touchend
当手指离开屏幕时触发
dom.addEventListener('touchend',funciton(e){});
//在touchend中,touches拿不到touch对象,
//因为触摸已经结束,changedTouches中拿到触摸对象
//console.log(e);
//endX=e.touches[0]; undefined
endX=e.changedTouches[0].clientX;
事件返回的e
对象包含的移动端特有的属性:
changedTouches:页面上最新更改的所有触摸
touchcancel: 系统停止跟踪触摸时会触发。(不经常用)
在touchend事件的时候,event知会记录changeTouches
4. e.touches[0]
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
移动端——touch事件的更多相关文章
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 移动端 touch 事件的originalEvent
对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端Touch事件基础
1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...
- 移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
- 移动端touch事件实现页面弹动--小插件
动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...
- 移动端 Touch 事件
在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...
- 移动端touch事件封装
<meta charset="utf-8"><meta name="viewport" content="width=device- ...
- 移动端--touch事件与点透问题
也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785
随机推荐
- c#修改密码后实现重新登录
C#中密码修改成功后,提示"密码修改成功,请重新登录.当用户一点确定的时候就跳到登录界面 直接重启程序就是了,在弹出个Messages.show("密码修改成功,请重新登录.&qu ...
- (二)目标检测算法之R-CNN
系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html 概述: 1.目标检测-Overfeat模型 2.目标检测-R-C ...
- Tableau学习Step5一表计算、详细级别表达式、动作、外接python
Tableau学习Step5一表计算.详细级别表达式.动作.外接python 本文首发于博客冰山一树Sankey,去博客浏览效果更好. ) Tableau学习Step4一数据解释.异常值监测.参数使用 ...
- 字符串格式化String.Format
//给变量赋值字符串00002 string s = String.Format( "{0:d5}", 2);
- Dubbo服务框架和spring-cloud架构的优缺点
Dubbo一.dubbo简介 Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC实现服务的输出和输入功能,可以和Spring框架无缝集成. Dubbo是一款高性能.轻 ...
- docker基础命令和操作
前言 之前在部署个人网站的时候,需要打包maven,在生产环境,需要使用到docker去做服务器和端口的守护. 于是在查阅了相关资料,学习了docker一些基本命令行操作,包括对镜像的查看,修改和添加 ...
- thinkphp 添加数据
....控制器方法返回视图 public function create() { // return view(); } ...............表单页面 <!DOCTYPE html&g ...
- 当.Net撞上BI可视化,这3种“套路”你必须知道
最近葡萄在做技术支持,又遇到了客户给我们出的新问题. 事情是这样的. 这次客户使用的是.Net项目,直接做BI大屏过于复杂,所以想直接集成使用BI数据可视化分析大屏. 所以,这次我们就从--Wyn出发 ...
- CF1228E题解
设 \(f_{i,j}\) 为恰好 \(i\) 行 \(j\) 列不满足条件的矩阵个数, \(g_{i,j}\) 为钦定 \(i\) 行 \(j\) 列不满足条件的矩阵个数. 容易得到: \[g_{x ...
- K8S原来如此简单(三)Pod+Deployment
上篇我们已经安装好k8s1.23集群,现在我们开始使用k8s部署我们的项目 Pod Pod 是一组容器集合,是可以在 Kubernetes 中创建和管理的.最小的可部署的计算单元.这些容器共享存储.网 ...