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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
移动节点的jquery代码
Jan 13 Javascript
js简单抽奖代码
Jan 16 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
JavaScript实现打砖块游戏
Feb 25 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
十天学会php之第九天
2006/10/09 PHP
PHP聊天室技术
2006/10/09 PHP
Banner程序
2006/10/09 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python处理json数据中的中文
2014/03/06 Python
Python制作数据导入导出工具
2015/07/31 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Python正则表达式如何匹配中文
2020/05/27 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
一道Delphi面试题
2016/10/28 面试题
事业单位辞职信范文
2014/01/19 职场文书
经销商订货会主持词
2014/03/27 职场文书
学校火灾防控方案
2014/06/09 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
关于vue-router-link选择样式设置
2022/04/30 Vue.js