js的touch事件的实际引用


Posted in Javascript onOctober 13, 2014

一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今。

而js,则被我主观的认为底层技术而抛弃。

直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索jquery 的相应技术支持实在繁琐(当然也可能是我对jquery的理解不够),而js只需几步简单定义即可。

由于对js的了解比较少,最简单的应用我都试了很久……下面就分享下js的touch事件的实际引用:

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

以上代码不可避免的使用了jquery的某些东西,不使用jquery的可以忽略之。

相应的事件有:

touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。

以上事件的event对象上面都存在如下属性:
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性:
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier:表示触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

好吧,我其实也刚开始学,反正先把一些百度来的属性记下来再说。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 #Javascript
5个JavaScript经典面试题
Oct 13 #Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 #Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 #Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 #Javascript
JS 获取鼠标左右键的键值方法
Oct 11 #Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 #Javascript
You might like
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
node.js通过url读取文件
2020/10/16 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
用Python解数独的方法示例
2019/10/24 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
酒店财务总监岗位职责
2015/04/03 职场文书
道歉信范文
2015/05/12 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
校运会广播稿
2015/08/19 职场文书
导游词之西安大清真寺
2019/12/17 职场文书