本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html

touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。

var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
     event.preventDefault();// 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX-50 + 'px';
obj.style.top = touch.pageY-50 + 'px';
}
}, false);

(转)手机端html5触屏事件(touch事件)的更多相关文章

  1. 手机端html5触屏事件(touch事件)

    touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...

  2. 转:手机端html5触屏事件(touch事件)

    touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...

  3. jquery -- 触屏设备touch事件

    几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦): touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend ...

  4. 手机端Swiper 触屏滑动

    在线实例 默认 响应式 垂直 空间间隔 滚动 自动滚动 中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor 使用方法 <div class="swiper-con ...

  5. 仿今日头条app手机端顶部触屏滑动导航

    swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 移动终端学习2:触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  7. 手机触屏的js事件

    处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件:     1.touchstart:  // 手指放到屏幕上的时候触发      2.touchmove:  // ...

  8. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  9. 实现手机端上下左右滑屏的jq原生代码和使用库·两种办法

    先来一个原生的.我使用的是jq. 需要注意的地方就是被触发的元素最好不要是body,这个代码也可以修改,如果obj传进来的是body那么,$(this)必须是你的监听元素,不然会冒泡泡,整个项目就…… ...

随机推荐

  1. ABySS 拼接工具

    ABySS, that stands for Assembly By Short Sequences, is a de novo, parallel, paired-end sequence asse ...

  2. 纯代码写UI的时候,如何指定style?

    有的时候,需要使用纯代码实现Android UI,那么这个时候如何指定某个UI组件的样式呢? 一般来说,UI组件都有一些set方法可供使用,以调整一些UI属性,从而达到调整样式的目的. 但是,情况并非 ...

  3. ANTLR3完全参考指南读书笔记[06]

    前言 这段时间在公司忙的跟狗似的,但忙的是没多少技术含量的活儿. 终于将AST IR和tree grammar过了一遍,计划明天写完这部分的读书笔记.   内容 1 内部表示AST构建 2 树文法   ...

  4. 98. Validate Binary Search Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  5. 批量kill相关所有进程

    首先,用ps查看进程,方法如下: $ ps -ef …… smx       1822     1  0 11:38 ?        00:00:49 gnome-terminal smx      ...

  6. HDU-4276 The Ghost Blows Light (树形DP+背包)

    题目大意:在一个n个节点的树形迷宫中,1为起点,n为出口.每个节点上有一定价值的珠宝,在节点之间移动的时间已知,问在能走出迷宫的前提下并且不超过m的时间内能收集的最多珠宝是多少? 题目分析:在树上,从 ...

  7. 关于setInterval()里的this和细节

    setInterval(fn,t);里的fn中,要使用外部类的this,则需要先将this保存起来,再使用保存的this,不能直接使用this,里面的this是指向window对象,记住setInte ...

  8. 《苹果开发之Cocoa编程》挑战2 创建一个数据源 练习

    <苹果开发之Cocoa编程>第4版 P87 创建一个to-do list应用程序,在文本框中输入任务.当用户单击Add按钮时,添加字符串到一个变长队列,新任务就出现在list的末尾. 关键 ...

  9. C#联调C++项目

    很多人在编写C#代码时,经常要调用C++代码,有时我们通常用打日志来查看运行状况,这当然可以,不过这样挺不方便,一遍遍的跑代码,一遍遍的看日志,感觉如果可以直接把断点打入C++的代码就好了,其实是可以 ...

  10. Android Facebook和Twitter分享

    1. 背景 在年初的时候,公司的项目有个新的需求,在英文版的应用中加入Facebook和Twitter分享功能. 2. 完成情况 由于这个项目比较急,所以开发这个功能从预研到接入总共耗时一周.后来,在 ...