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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
jupyter安装小结
2016/03/13 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python银行系统实现源码
2019/10/25 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
scrapy头部修改的方法详解
2020/12/06 Python
LINUX下线程,GDI类的解释
2012/04/17 面试题
店铺转让协议书(2014版)
2014/09/23 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle