HTML5触摸屏touch事件使用介绍1
市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的。由于设备的不同浏览器的事件的设计也不同。传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用,但是效果不够好。PC上还没有哪个事件是可以与触屏手机的触摸事件对应的,为了更好的用户体验,移动站点的建设也需要对不同的事件进行处理。
介绍几种兼容比较好的触摸事件,大部分触屏设备都支持的。
touchstart:触摸开始的时候触发
touchmove:触摸时手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
touchcancel:系统取消touch事件的时候触发
事件绑定,代码示例:
var obj = document.getElementById('id');
obj.addEventListener('touchstart', touchStart, false);
obj.addEventListener('touchmove', touchMove, false);
obj.addEventListener('touchend', touchEnd, false);
var touchMove = function(event) {
if (event.targetTouches.length == 1) {
// prevent default
event.preventDefault();
var touch = event.targetTouches[0];
// do something
} };
触摸事件属性介绍
touches:当前位于屏幕上的所有触点的列表,IOS支持的比较好,目前Android系统的浏览器一般对多点触控不敏感。
targetTouches:位于当前触点之下的DOM节点。
changedTouches:事件触发时的触点。
每个触摸点由包含了如下触摸信息
identifier:唯一标识触摸会话。
target:事件目标DOM元素。
pageX/pageY/clientX/clientY/screenX/screenY:页面/窗口/屏幕的位置。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。
使用说明:
//touchstart 触屏开始的时候触发
//使用e.targetTouches[0] 获取触点
window.addEventListener('touchstart', function (e) {
console.info(e);
if(e.targetTouches.length==1){
var touch = e.targetTouches[0];
console.info(touch);
console.info(touch.pageX);
console.info(touch.pageY);
}
},false);
//touchmove 触屏移动过程出发
//使用e.targetTouches[0]或者e.changedTouches[0] 获取触点
document.body.addEventListener('touchmove', function (e) {
console.info(e);
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
console.info(touch);
console.info(touch.pageX);
console.info(touch.pageY);
}
if (e.changedTouches.length == 1) {
var touch = e.changedTouches[0];
console.info(touch);
console.info(touch.pageX);
console.info(touch.pageY);
}
console.info('--------------------------');
});
//touchend 触屏结束触发
//使用 e.changedTouches[0]获取触点
window.addEventListener('touchend', function (e) {
console.info(e);
if (e.changedTouches.length == 1) {
var touch = e.changedTouches[0];
console.info(touch);
console.info(touch.pageX);
console.info(touch.pageY);
}
}, false);
Goole浏览器下TouchEvent对象
Google下Touch对象
FF下TouchEvent对象
HTML5触摸屏touch事件使用介绍1的更多相关文章
- HTML5触摸屏touch事件使用实例1
1.源码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ...
- HTML5的touch事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- html5之touch事件
前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互 ...
- html5 touch事件实现触屏页面上下滑动(一)
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- 通过html5 touch事件封装手势识别组件
html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown ...
- javascript——touch事件介绍与实例演示
分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...
- 转载–移动互联网终端的touch事件,touchstart, touchend, touchmove
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 手机touch事件及参数【转】(自己懒得写了,找了一篇摘过来)
[html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...
随机推荐
- Java反射机制(转载)
原文链接:http://www.blogjava.net/zh-weir/archive/2011/03/26/347063.html Java反射机制是Java语言被视为准动态语言的关键性质.Jav ...
- Spring Cp30配置
1.配置db.properties <bean id= "propertyConfigurer" class="org.springframework.beans. ...
- 2015 偶数求和 AC 杭电
偶数求和 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- 【PRO ASP.NE MVC4 学习札记】使用Moq辅助进行单元测试
清楚问题所在: 先开个头,当我们对A进行单元测试时,可能会发现A的实现必须要依赖B.这时,我们在写单元测试时,就必须先创建B的实例,然后把B传给A再建立A的实例进行测试. 这样就会出现一些问题: 1. ...
- (转)JavaScript 开发者经常忽略或误用的七个基础知识点
英文原文:7 JavaScript Basics Many Developers Aren't Using (Properly) JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和 ...
- 实验六:分析Linux内核创建一个新进程的过程
原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 题目自拟,内容围绕对Linu ...
- 10个Java面试题及答案
1. 什么是JVM? 为什么称Java为跨平台的编程语言? Java虚拟机(Java Virtual Machine)是可以执行Java字节码的虚拟机,每个Java源文件将被编译成字节码文件,然后在J ...
- cms中if标签的使用
<#if order.EnFriendly ?? && order.EnFriendly==1> <td class="text-center"& ...
- 用OpenGL简单编写的一个最简单贪吃蛇游戏
刚学OpenGL的时候,写的一个最简单的贪吃蛇游戏代码 如下: //贪吃蛇游戏 #include<stdio.h> #include<stdlib.h> #include< ...
- 多线程信号量 Semaphore使用
对信号量只能实施三种操作: 1. 初始化(initialize),也叫做建立(create) 2. 等信号(wait),也可叫做挂起(pend) 3. 给信号(signal)或发信号(post) ...