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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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的文章管理系统(二)
2006/10/09 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
详解js类型判断
2018/05/22 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
详解Python中的正则表达式
2018/07/08 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
创建绿色社区汇报材料
2014/08/22 职场文书
邀请书格式范文
2015/02/02 职场文书
2015年入党决心书
2015/02/05 职场文书
体育部部长竞选稿
2015/11/21 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Mysql中mvcc各场景理解应用
2022/08/05 MySQL