在移动端页面开发时,常常会用到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 事件的更多相关文章

  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事件封装

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

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

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

随机推荐

  1. node.js搭建https服务器

    HTTPS简介 HTTPS:(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版. ...

  2. TortoiseGit记住用户名&密码

    配置并安装好git之后鼠标右键: 在全局配置文件末尾添加一行: [credential] helper = store *主意保存时以utf-8格式保存,否则中文可能会乱码,这样下次只需输入一次用户名 ...

  3. 谷歌在线appspot平台教你学Hacker(由浅如深)-XSS篇

    练习链接 http://google-gruyere.appspot.com/ 点开是纯英文的 直接点翻译即可 一 .part1 http://google-gruyere.appspot.com/p ...

  4. new date()标准时间转yyyy-mm-dd hh:mm 24小时制

    <!DOCTYPE html> <html> <head> <title>new date()标准时间转yyyy-mm-dd hh:mm 24小时制&l ...

  5. 深入理解ES6之函数

    一:关于函数的参数: 可以接受任意数量的参数而无视函数声明的参数数量是js函数的独特之处. 1:参数默认值 ES6之前做法: function makeRequest(url,timeout,call ...

  6. 【转】46 个非常有用的 PHP 代码片段

    1. 发送 SMS 在开发 Web 或者移动应用的时候,经常会遇到需要发送 SMS 给用户,或者因为登录原因,或者是为了发送信息.下面的 PHP 代码就实现了发送 SMS 的功能. 为了使用任何的语言 ...

  7. System.Net.Mail 邮件发送示例

    前言:OA自动发送邮件的程序不好使,SQL Server 存储过程邮件发送程序好使,但是不利于标准化和维护,于是觉得是适合找些“轮子”武装一下.想起之前学习过System.Net.Mail ,于是再次 ...

  8. 如何定位 Node.js 的内存泄漏

    基础知识 Node.js 进程的内存管理,都是有 V8 自动处理的,包括内存分配和释放.那么 V8 什么时候会将内存释放呢? 在 V8 内部,会为程序中的所有变量构建一个图,来表示变量间的关联关系,当 ...

  9. 【Udacity】线性回归方程 Regression

    Concept in English Coding Portion 评估回归的性能指标--R平方指标 比较分类和回归 Continuous supervised learning 连续变量监督学习 R ...

  10. redis 在linux安装

    转自:http://futeng.iteye.com/blog/2071867 下载 官网下载 安装 tar zxvf redis-2.8.9.tar.gz cd redis-2.8.9 #直接mak ...