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方法调用括号的问题探讨
Jan 24 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
Ajax实现异步加载数据
Nov 17 Javascript
javascript之Object.assign()的痛点分析
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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP基础学习小结
2011/04/17 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
javascript实现日历效果
2019/06/17 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python中__slots__用法实例
2015/06/04 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python实现FTP循环上传文件
2020/03/20 Python
Yahoo-PHP面试题2
2014/12/06 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
2015年考研复习计划
2015/01/19 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
金榜题名主持词
2015/07/02 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python