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);

最新文章

  1. [gist]在浏览器里免查看源代码格式化var_dump输出
  2. 没有Iphone也能装逼:让Android版QQ显示成Iphone6
  3. 关于 Cannot forward after response has been committed的错误
  4. 网球pt站 T3nnis 情况说明
  5. 《Google软件测试之道》测试工程师
  6. js 捕获浏览器后退事件
  7. 【php增删改查实例】 第三节 - mysql 建表
  8. bzoj1345 序列问题 (贪心)
  9. ibatis.net:第二天,Hello,World ?
  10. Bootstrap-CSS:网格系统
  11. [报错] Xcode Error-Could not insert new outlet connection: Could not find any information for the class named "xxx"
  12. django notes 一:开篇
  13. 【转载】用C#编写一个简单的记事本
  14. application.properties 改成 application.yml
  15. Promise小结
  16. CentOS 7安装与配置jdk-8u162
  17. python 之 匿名函数
  18. ubuntu wsl 子系统使用win10 系统ss代理步骤
  19. linux更改gitlab存储位置
  20. P3225 [HNOI2012]矿场搭建 割点 tarjan 双联通分量

热门文章

  1. delphi INI文件
  2. 电脑U盘启动制作
  3. ASP.NET Core学习——1
  4. ()获取Cookies session
  5. kmalloc vs vmalloc
  6. 【Linux】- Systemd 实战篇
  7. Java多线程sleep和wait的区别,总结得非常好。
  8. 32-Ubuntu-用户权限-03-修改文件权限
  9. vue keep-alive缓存问题
  10. Intellij IDEA gradle项目目录介绍