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省市联动实现代码
Feb 15 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php 计划任务 检测用户连接状态
2012/03/29 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
微信小程序模版渲染详解
2018/01/26 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
基于python图像处理API的使用示例
2020/04/03 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
某公司.Net方向面试题
2014/04/24 面试题
女方婚礼新郎答谢词
2014/01/11 职场文书
优质服务口号
2014/06/11 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
红色影片观后感
2015/06/18 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
python 单机五子棋对战游戏
2022/04/28 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python