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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
extjs form textfield的隐藏方法
Dec 29 Javascript
Jquery cookie操作代码
Mar 14 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
Vue绑定用户接口实现代码示例
Nov 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Python中有趣在__call__函数
2015/06/21 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
PyQT实现多窗口切换
2018/04/20 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
枚举与#define宏的区别
2014/04/30 面试题
幼儿园毕业园长感言
2014/02/24 职场文书
司法助理专业自荐书
2014/06/13 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
小学教师节活动总结
2015/03/20 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
Go 语言结构实例分析
2021/07/04 Golang