市面上手机种类繁多,在触屏手机上运行的网页跟传统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的更多相关文章

  1. HTML5触摸屏touch事件使用实例1

    1.源码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ...

  2. HTML5的touch事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. html5之touch事件

    前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互 ...

  4. html5 touch事件实现触屏页面上下滑动(一)

    最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...

  5. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  6. 通过html5 touch事件封装手势识别组件

    html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown ...

  7. javascript——touch事件介绍与实例演示

      分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...

  8. 转载–移动互联网终端的touch事件,touchstart, touchend, touchmove

    转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

  9. 手机touch事件及参数【转】(自己懒得写了,找了一篇摘过来)

    [html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...

随机推荐

  1. Java反射机制(转载)

    原文链接:http://www.blogjava.net/zh-weir/archive/2011/03/26/347063.html Java反射机制是Java语言被视为准动态语言的关键性质.Jav ...

  2. Spring Cp30配置

    1.配置db.properties <bean id= "propertyConfigurer" class="org.springframework.beans. ...

  3. 2015 偶数求和 AC 杭电

    偶数求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  4. 【PRO ASP.NE MVC4 学习札记】使用Moq辅助进行单元测试

    清楚问题所在: 先开个头,当我们对A进行单元测试时,可能会发现A的实现必须要依赖B.这时,我们在写单元测试时,就必须先创建B的实例,然后把B传给A再建立A的实例进行测试. 这样就会出现一些问题: 1. ...

  5. (转)JavaScript 开发者经常忽略或误用的七个基础知识点

    英文原文:7 JavaScript Basics Many Developers Aren't Using (Properly) JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和 ...

  6. 实验六:分析Linux内核创建一个新进程的过程

    原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 题目自拟,内容围绕对Linu ...

  7. 10个Java面试题及答案

    1. 什么是JVM? 为什么称Java为跨平台的编程语言? Java虚拟机(Java Virtual Machine)是可以执行Java字节码的虚拟机,每个Java源文件将被编译成字节码文件,然后在J ...

  8. cms中if标签的使用

    <#if order.EnFriendly ?? && order.EnFriendly==1> <td class="text-center"& ...

  9. 用OpenGL简单编写的一个最简单贪吃蛇游戏

    刚学OpenGL的时候,写的一个最简单的贪吃蛇游戏代码 如下: //贪吃蛇游戏 #include<stdio.h> #include<stdlib.h> #include< ...

  10. 多线程信号量 Semaphore使用

    对信号量只能实施三种操作:  1. 初始化(initialize),也叫做建立(create)  2. 等信号(wait),也可叫做挂起(pend)  3. 给信号(signal)或发信号(post) ...