本文来自《JavaScript高级程序设计》阅读笔记
iOS版Safari新增了一些专有事件,因为iOS设备没有鼠标和键盘。
1、触摸事件:
- touchstart 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
- touchmove 当手指在屏幕上滑动时候连续触发,可以用preventDefault阻止
- touchend 当手指从屏幕上移开时候触发
- touchcancle 当系统停止跟踪触摸时候触发
2、属性:
每一个触摸事件的event对象常见属性:
- bubbles
- cancelable
- view
- clientX
- clientY
- screenX
- screenY
- detail
- altKey
- shiftKey
- ctrlKey
- metaKey
还包含3个用于跟踪触摸的属性:
- touches 当前跟踪的触摸操作的Touch对象的数组
- targetTouchs 特定于事件目标的Touch对象的数组
- changeTouches 自上次触摸以来发生了什么改变的Touch对象的数组
每一个Touch对象包含下列属性:
- clientX触摸目标在视口中的x坐标
- clientY触摸目标在视口中的y坐标
- pageX触摸目标在页面中的x坐标
- pageY触摸目标在页面中的y坐标
- screenX触摸目标在屏幕中的x坐标
- screenY触摸目标在屏幕中的y坐标
- target触摸的DOM节点目标
- identifier标识触摸的唯一ID
实例代码:
function handleTouchEvent(event){ if(event.touches.length == 1){ var output = document.getElementById("output"); switch(event.type){ case "touchstart": output.innerHTML = "Touch started (" + event.touches[0].clientX + ","+event.touches[0].clientY+")"; case "touchend": output.innerHTML = "Touch ended (" + event.changedTouches[0].clientX + ","+event.changedTouches[0].clientY+")"; case "touchmove": event.preventDefault(); output.innerHTML = "Touch moved (" + event.changedTouches[0].clientX + ","+event.changedTouches[0].clientY+")"; } } }
触摸事件的顺序:
- touchstart
- mouseover
- mouseover(一次)
- mousedown
- mouseup
- click
- touchend
浏览器支持:
- iOS Safari
- Android版Webkit
- LG专有的OS中的Phantom
相关推荐
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web开发的...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web开发的...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
本书首先介绍了html5 的历史背景、新的语义标签及与以往html 版本相比的根本变化,同时揭示了html5 背后的设计原理。...11.2.5 触摸屏设备事件 218 11.2.6 p2p网络 220 11.2.7 最终方向 221 11.3 小结 221
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web开发的...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 ...学习体验HTML5带给Web开发的...11.2.5 触摸屏设备事件 218 11.2.6 P2P网络 220 11.2.7 最终方向 221 11.3 小结 221
丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:9787115215369 上架时间:2009-11-6 出版日期:2009 年11月 开本:16开 页码:196 版次:1-1 编辑推荐 你的第一本Android书. Pragmatic系列...
jQWidgets是用于Angular,React,Vue,Blazor,Web组件,Javascript和ASP .NET的高级UI框架。 什么是jQWidgets? jQWidgets代表一个基于Javascript的框架,用于构建可在PC,Touch和移动设备上运行的基于Web的应用...
设计摄像头应用程序 连接至用户的摄像头 验证是否已安装摄像头 检测摄像头的访问权限 最优化摄像头视频品质 监控摄像头状态 第章:使用数字权限管理 了解受保护的内容工作流程 NetStream类中与DRM相关的成员和事件 ...
多平台高级可视化框架 G3M是为以下目的而开发和设计的框架: 开发2D,2,5D和3D移动地图应用程序 处理实时数据 集成任何类型的数据(格式,大小) 集成在任何旧系统上 高性能移动原生开发 多点触摸屏 作为服务器和...
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。 Highcharts 支持的图表类型有直线...
PaintZ设计为快速且易于使用,具有触摸和鼠标友好的Material Design界面,完全脱机支持,并且不需要Flash Player或其他插件。原则快速,轻巧-新功能不应使PaintZ的启动或使用速度明显变慢。 专注且简单-PaintZ可以...
特征可配置外观,由Bootstrap / Less提供超过100种精心设计的React组件用于管理来自React式数据源的数据的高级React组件React灵敏且触摸友好,可在所有设备上完美工作精心策划的第三方软件包可以很好地协同工作基于...