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事件的更多相关文章

  1. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  2. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  3. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  4. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  5. 移动端Touch事件基础

    1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...

  6. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  7. 移动端touch事件实现页面弹动--小插件

    动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...

  8. 移动端 Touch 事件

    在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...

  9. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

  10. 移动端--touch事件与点透问题

    也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785

随机推荐

  1. Bugku CTF_web5

    1.打开网页,得到信息如下 2.打开hackbar,在body里传入post参数. 3.得到flag如下 4.主要考察以下几点: ->php无论是通过get请求还是post请求得到的数据都是字符 ...

  2. @PostConstruct使用注意点

    前景提要:在一个项目中,由于数据库中敏感词删除掉了,但是在网页进行匹配时仍然能够匹配上已删除的词. 查看项目源码发现使用了@PostConstruct注解: 此注解的作用是:@PostConstruc ...

  3. laravel redis操作大全

    字符串操作 普通得set/get操作,set操作,如果键名存在,则会覆盖原有得值 $redis = app("redis.connection"); $redis->set( ...

  4. Adobe photoshop CS6 + 破解补丁

    软件位置: 链接:https://pan.baidu.com/s/1KeKRS0yIMfeEbOJQ-ilo0g 破解流程 首先断开网络连接 (如果不断网安装过程中会要求登陆)打开Photoshop ...

  5. 自学java一路以来,心血心得整理分享

    ✿ 贴心提示:文章内容比较长,但都是干货,请大家耐心看完.时间不够充裕的小伙伴,建议收藏,一定要耐心看完,保证对你有后续学习java有所帮助. 一.推荐背景介绍 (一)我是怎么学的? ★ 非常普通的人 ...

  6. vue监听页面中的某个div的滚动事件,并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...

  7. LGP7847题解

    题意:给定 \(n\),求方程 \(\frac 1 a - \frac 1 b=\frac 1 n\) 的所有解,且解必须满足 \(\gcd(a,b,n)=1\). 以下内容搬运自官方题解: 转化一下 ...

  8. “exec: "ssh-keygen": executable file not found in %PATH%” 问题解决

    set PATH=%PATH%;C:\Program Files (x86)\Git\bin bash start.sh 将以上内容保存为start.bat,放在boot2docker根目录下,管理员 ...

  9. MyBatis 与 Hibernate 有哪些不同?

    1.Mybatis 和 hibernate 不同,它不完全是一个 ORM 框架,因为 MyBatis 需要 程序员自己编写 Sql 语句. 2.Mybatis 直接编写原生态 sql,可以严格控制 s ...

  10. spring源码-ioc容器周期

    Spring容器的refresh 创建刷新:   1-prepareRefresh刷新前的预处理: initPropertySources 初始化一些属性配置,原来是空的,子类自定义的属性设置方法 g ...