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 相关文章推荐
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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网站判断用户是否是手机访问的方法
2013/11/01 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Python __slots__的使用方法
2020/11/15 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
中学运动会广播稿
2014/01/19 职场文书
聚美优品广告词改编
2014/03/14 职场文书
团拜会策划方案
2014/06/07 职场文书
教师节晚会主持词
2015/06/30 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书