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和ActionScript的交互实现代码
Aug 01 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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中require和require_once的区别说明
2014/02/27 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php生成短网址示例
2014/05/05 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
js图片预加载示例
2014/04/30 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
2017/02/19 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
浅谈python字符串方法的简单使用
2016/07/18 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python 多进程队列数据处理详解
2019/12/23 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
就业表自我评价分享
2014/02/06 职场文书
写给老婆的检讨书
2014/02/21 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android