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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
vue动态配置模板 'component is'代码
Jul 04 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 session会话的安全性分析
2011/09/08 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
js实现旋转木马效果
2017/03/17 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
python3调用R的示例代码
2018/02/23 Python
Python OpenCV获取视频的方法
2018/02/28 Python
pandas对指定列进行填充的方法
2018/04/11 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
高中自我鉴定范文
2013/11/03 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
小学数学课题方案
2014/06/15 职场文书
车辆转让协议书
2014/09/24 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
领导干部作风建设总结
2014/10/23 职场文书
民事和解协议书格式
2014/11/29 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技