几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦):

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

有了这些信息,我们就可以依据这些事件信息为用户提供不同的反馈了。

下面,展示一个小demo,用touchmove实现的单指拖动:

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

关于a标签四个伪类在触屏设备中的小技巧:

我们都知道a标签的四个伪类link,visited,active,hover是专为click事件设计的,所以在触屏网站中尽量不要使用它们。经测试大部分也是不可用的。但是这里有一个关于hover的小技巧,当你点击过一个按钮之后,这个按钮就会一直处于hover的状态,此时你基于这个伪类所设置的css也是起作用的,直到你用手指点击另外一个按钮,hover状态就会转移到另一个按钮。利用这一点,我们可以做出一些小效果。此技巧在大多数浏览器中还是可用的。

jquery -- 触屏设备touch事件的更多相关文章

  1. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

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

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

  3. 在触屏设备中拖动 overflow 元素

    在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...

  4. 在触屏设备上面利用html5裁剪图片

    前言 如今触屏设备越来越流行,并且大多数已经支持html5了.针对此.对触屏设备开发图片裁剪功能, 让其能够直接处理图片.减轻服务端压力. 技术点 浏览器必须支持html5,包含fileReader. ...

  5. 在触屏设备上面利用html5裁剪图片(转)

    前言 现在触屏设备越来越流行,而且大多数已经支持html5了.针对此,对触屏设备开发图片裁剪功能, 让其可以直接处理图片,减轻服务端压力. 技术点 浏览器必须支持html5,包括fileReader, ...

  6. jquery 触屏滑动+定时滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 手机触屏的js事件

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

  8. 触屏Tap模拟事件

    触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用. gibhub上有个fastclick太大了. 自己用touched写个简单的模拟t ...

  9. [Winform]关于cefsharp触屏设备长按文本内容,崩溃问题的修复

    摘要 在之前遇到cefsharp,在触屏电脑上,长按文本内容,会崩溃的问题. 相关文章 当时遇到这样的问题,在cefsharp项目下提交了bug.已经修复,可以参考当时我提的bug,以及解决过程,可参 ...

随机推荐

  1. 专业版Unity技巧分享:使用定制资源配置文件 ScriptableObject

    http://unity3d.9tech.cn/news/2014/0116/39639.html 通常,在游戏的开发过程中,最终会建立起一些组件,通过某种形式的配置文件接收一些数据.这些可能是程序级 ...

  2. HDU4300-Clairewd’s message(KMP前缀匹配后缀)

    Clairewd's message Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  3. 视频编码格式转换 MP4

    视频工具有很多,如专业的premiere,但是我们只要涉及后期转换,不涉及制作,所以用不到这末专业的工具. 一般来说,使用暴风转码或者qq影音工具就足以应付我们的日常转换需求,下面以qq影音软件做说明 ...

  4. 强制关机后导致VBOX(4.2.16 r86992)的虚拟机不可使用问题的解决MEMO

    上周六晚上由于有急事,就强制关机,导致今天晚上用VirtualBox(4.2.16 r86992)时,虚拟机上写着不可使用. 显示异常Message如下: D:\tinderbox\win-4.2\s ...

  5. maven web配置发布路径 cargo自动部署项目到tomcat

    pom.xml中加入以下 配置发布路径 <build> <!-- 发布名 www.locathost:8080/HelloWeb可以访问,如果改成ROOT那么 默认的tomcat也就 ...

  6. Ubuntu和windows文件共享问题

    ubuntu访问windows共享文件夹(ubuntu桌面系统):          最简单的方法,随便打开一个文件夹,按Ctrl+L,然后地址栏敲smb://xxx.xxx.xxx.xxx(wind ...

  7. Zoie中文文档及简单解析

    https://linkedin.jira.com/wiki/pages/viewpage.action?pageId=4456480 一.总体架构 Zoie是一个实时的搜索引擎系统,其需要逻辑上独立 ...

  8. C#获取显示器屏幕数量 控制winform显示到哪一个屏幕

    获取当前系统连接的屏幕数量: Screen.AllScreens.Count();获取当前屏幕的名称:string CurrentScreenName = Screen.FromControl(thi ...

  9. Eclipse删除文件的恢复(转)

    与vs不同,在eclipse中删除的文件是不会放进回收站的, 很多人以为eclipse是直接在磁盘删除文件,所以一般都会用反删除软件恢复. 其实不必那么麻烦的,只要对着被删除文件的上一层目录按右键, ...

  10. 转mosquitto auth plugin 编译配置

    配置使用 mysql 作为 be (back end) 使用config.mk 配置编译参数 cp config.mk.in config.mk 修改 安装 mysql sudo apt-get in ...