移动端 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
随机推荐
- 面向对象 OOP
[面向对象编程OOP] 1 语言的分类 面向机器 :汇编语言 面向过程 :c语言 面向对象 :c++ Java PHP等 2 面向过程与面向对象 面向过程:专注于如何去解决一个问题的过程,编程 ...
- golang学习之生成代码文档
go doc 工具会从 Go 程序和包文件中提取顶级声明的首行注释以及每个对象的相关注释,并生成相关文档. 一般用法: go doc package 获取包的文档注释,例如:go doc fmt 会显 ...
- Node.js学习笔记(三) --- package.json 及cnpm
一.包 Nodejs 中除了它自己提供的核心模块外,我们可以自定义模块,也可以使用第三方的模块.Nodejs 中第三方模块由包组成,可以通过包来对一组具有相互依赖关系的模块进行统一管理. 完全符合 ...
- SSM实现批量删除功能
批量删除功能的实现 其实实现这个功能还是挺简单的 因为我这是直接拼接的,所以用了DOM方法来获取id话不多说直接上代码首先是复选框全选和反选这里的话 获取最上面一个复选框的状态同步到拼接的复选框 $ ...
- js控制input text字符键入/字符长度限制/字母自动大写
功能: 1.仅允许指定字符键入 2.限制长度 实现代码: <input type="text" style="width: 6em" name=" ...
- Spring课程 Spring入门篇 5-5 advice应用(下)
2 代码演练 2.1 环绕通知(不带参数) 2.2 环绕通知(带参数) 2 代码演练 2.1 环绕通知(不带参数) 实体类: package com.imooc.aop.schema.advice.b ...
- String Control
using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...
- 合并excel的多个sheet
'合并excel的多个sheetSub 合并当前工作簿下的所有工作表()Application.ScreenUpdating = FalseFor j = 1 To Sheets.Count If S ...
- java idea+ssm框架遇到的问题
0.学习教程 http://www.cnblogs.com/jiekzou/p/9205117.html https://github.com/crossoverJie/SSM 1.gradle没刷新 ...
- Java BeanUtils 组件 使用
1. BeanUtils组件 1.1 简介 程序中对javabean的操作很频繁, 所以apache提供了一套开源的api,方便对javabean的操作!即BeanUtils组件. BeanUtils ...