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 相关文章推荐
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
浅谈js闭包理解
Mar 28 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
js实现微信聊天效果
Aug 09 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python基于动态规划算法计算单词距离
2015/07/25 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python不同系统中打开方法
2020/06/23 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
《猫》教学反思
2014/02/26 职场文书
员工薪酬激励方案
2014/06/13 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
幽默导游词开场白
2015/05/29 职场文书
Python如何配置环境变量详解
2021/05/18 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库