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 动态选中下拉框
Nov 26 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
个人小程序接入支付解决方案
May 23 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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实现上传图片文件代码
2015/07/19 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
js中new一个对象的过程
2017/02/20 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
Python常用列表数据结构小结
2014/08/06 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python pickle模块实现对象序列化
2019/11/22 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
企业法人授权委托书
2014/04/03 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
何玥事迹观后感
2015/06/16 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
初中语文教学随笔
2015/08/15 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js