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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 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(2)
2006/10/09 PHP
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
实例讲解python函数式编程
2014/06/09 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
化学教师自荐信范文
2013/12/28 职场文书
应届生求职自荐信
2014/07/04 职场文书
毕业生应聘求职信
2014/07/10 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
请病假条范文
2015/08/17 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
SQL中的三种去重方法小结
2021/11/01 SQL Server
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android