移动端Touch事件基础
1、三个常用的移动端事件
ontouchstart 手指按下时触发
ontouchmove 手指移动时触发
ontouchend 手动抬起时触发
注意:这些事件当作事件属性使用时,不兼容谷歌浏览器。
解决方案是,使用 addEventListener()来注册这些移动端事件。
2、pc端事件和移动端事件的区别
1)通过 on的方式添加touch事件,在谷歌浏览器下无效。
2)pc端的鼠标事件,用在移动端使用时,会产生300毫秒的延迟。
3、移动事件对象 TouchEvent
TouchEvent对象,是一个标准事件对象,它默认是事件处理程序的第一个参数。它描述了touch事件发生时的详细信息。
获取手指信息:
touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表
获取手指的个数:
e.changedTouches.length
相关坐标的获取:
e.pageX / e.pageY 手指触屏时到网页顶部/左侧的距离。
e.clientX / e.clientY 手指触屏时到窗口上侧/左侧的距离。
obj.offsetLeft / obj.offsetTop 对象到定位父级的left/top值。
获取触屏时坐标:
e.changedTouches[0].pageX / e.changedTouches[0].pageY
三个手指对象的区别:
在touchend时获取手指列表,只能用 changedTouches。原因是当手指抬起时,touches和targetTouches就没有了,所以只能用changedTouches来获取手指列表。
(未完待续)
移动端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事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
- 移动端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
随机推荐
- OpenStack dashboard界面操作 实现登陆虚拟机并通信
1.创建项目,点击"创建项目" (1).填写项目信息 (2).添加与之关联的项目成员 (3).点击"配额",为用户在平台上分配一个操作的空间,便于用户创建网络, ...
- 【charger battery 充電 充電器 電池】過充保護警告訊息 over charging protection,Battery over voltage protection, warning message
Definition: over charging protection.battery over voltage protection, 是一種 battery 保護機制, 避免 battery 充 ...
- ajax传数组到后台,后台springmvc接收数组参数
var ids= new Array(); $("input[class='detailCheck']:checked").each(function(i,k){ var ...
- docker - win7下构建swarm nodes实现跨host的容器之间的通信
前言 之前在Linux环境下尝试了swarm,通过将不同host以swarm nodes 的方式连接到一起(构建Overlay 子网),从而实现跨host的container通信. 今天我们就来说说如 ...
- .net 利用Emit将object转为DbParameter,DataTable转为List<>
先放测试结果图,测试的方法是拷贝了老赵的一个简单的性能计数器:CodeTimer.发现速度还是比利用反射来获取快了2倍左右的,将object转为DbParameter的反射方法我没写. ...
- 基于TF-IDF的新闻标签提取
基于TF-IDF的新闻标签提取 1. 新闻标签 新闻标签是一条新闻的关键字,可以由编辑上传,或者通过机器提取.新闻标签的提取主要用于推荐系统中,所以,提取的准确性影响推荐系统的有效性.同时,对于将标签 ...
- JS语句
JS语句包括: 1.顺序语句 2.分支语句: if...else switch...case 3.循环语句 一.先看顺序语句: </body> < ...
- C++实现密码强度测试
最近在博客中看到许多用js写的密码强度检测,我觉得挺有意思的,所以呢我打算自己也写个来玩玩,最可悲的是我还没学js,当然这不重要,所以呢打算用C++来写一个密码强度检测,这里我来给大家说说用JS写的和 ...
- Jmeter-WINDOWS下的配置部署
前提:已配置安装JDK环境及已部署TOMCAT. 解压apache-jmeter-2.9.zip文件至目录,我的是D:\Program Files目录. 点击我的电脑----属性----高级----环 ...
- 关于java中使用数组的几点理解笔记
1.数组元素就是变量: 2.在已有数据类型之后加方括号[],就会产生一个新的数组类型: 分两类:1)基本数据类型,如:int[],string[]; 2)引用数据类型,如:Person[](类): 3 ...