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 Event学习第九章 鼠标事件
Feb 08 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
jQuery操作css样式
May 15 jQuery
angularjs实现猜大小功能
Oct 23 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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程序员工具
2008/05/26 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python getopt详解及简单实例
2016/12/30 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Python 元类实例解析
2018/04/04 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
医学院毕业生自荐信范文
2014/03/06 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
代理协议书范本
2014/04/22 职场文书
基层党员公开承诺书
2014/05/29 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python