移动端 Touch 事件
在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。
每个事件包含下面三个用于跟踪虎摸的属性:
touches:表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个touch事件包含下面的属性:
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
例如:
$(document).on('touchstart',function(e){
alert("开始滑动(" + e.touches[0].clientX + "," + e.touches[0].clientY + ")")
});
$(document).on('touchmove',function(e){
alert("滑动中(" + e.changeTouches[0].clientX + "," + e.changeTouches[0].clientY + ")")
});
$(document).on('touchend',function(e){
alert("滑动结束(" + e.touches[0].clientX + "," + e.touches[0].clientY + ")")
})
移动端 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事件封装
<meta charset="utf-8"><meta name="viewport" content="width=device- ...
- 移动端--touch事件与点透问题
也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785
随机推荐
- html元素两种分类。替换元素和不可替换元素;块级元素和行内元素
根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...
- ps命令详解加例子
Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...
- JavaWeb之JSP原理
1.为什么需要JSP? 在很多动态网页中,绝大部分内容都是固定不变的,只有局部内容需要动态产生和改变.如果使用Servlet程序来输出只有局部内容需要改动的网页,其中所有的静态内容也需要程序员用jav ...
- Java finally关键字
关于finally语句块,有如下特点: 1.finally语句块可以直接和try语句块联用.try...finally... 2.try...catch...finally也可以 3.通常在final ...
- Javascript获取页面表格中的数据
var main=mygrid.gettable("11"); //表示获取非固定列的表格 var main1=mygrid.gettable("01");// ...
- C10K问题摘要
本文的内容是下面几篇文章阅读后的内容摘要: http://www.kegel.com/c10k.html (英文版) http://www.oschina.net/translate/c10k (中文 ...
- ugui之圆角矩形头像实现
这个是参考大神的修改了一下渲染方式实现的,可以去查看原帖的,原贴是圆形头像,原理讲的非常详细 点击这里 我写的这个只支持正方形图片,效果是酱紫的~ 一共三个代码,还需要两个代码,原帖里都有的,我只是修 ...
- 解决 spring cloud 项目的 com.netflix.hystrix.contrib.javanica.aop.aspectj.HystrixCommandAspect 错误信息
在项目中引入:引入hystrix依赖,如下 <dependency> <groupId>org.springframework.cloud</groupId> &l ...
- CXPACKET等待事件
今天收到数据库预警,发现连接数较多.于是立马登录查看机器的基本情况: select * from sys.sysprocesses 查看了一下连接数,发现有两个进程都处于CXPACKET状态,而且看得 ...
- The package 'MySql.Data' tried to add a framework reference to 'System.Runtime' which was not found in the GAC
最近在学习Visual Studio连接mysql EF模型.在nuget中安装mysql.data时总是提示The package 'MySql.Data' tried to add a frame ...