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的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
Python实现list反转实例汇总
2014/11/11 Python
Python 闭包的使用方法
2017/09/07 Python
Python应用库大全总结
2018/05/30 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python 实现逻辑回归
2020/12/30 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
学院领导推荐信
2013/10/30 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
户籍证明格式
2014/09/15 职场文书
村官个人总结范文
2015/03/03 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL