jquery -- 触屏设备touch事件

摘要:
TargetTouches:当前DOM元素上的手指列表。ChangedTouches:当前事件中涉及的手指列表。接下来,我们将展示一个使用touchmove实现单指拖动的小演示:/*单指拖动*/varobj=document。按ID获取元素;obj.addEventListener;触摸屏设备中标记的四个伪类的提示:我们都知道标记的四种伪类,链接、访问、活动和悬停,是为点击事件而设计的,所以尽量不要在触摸屏网站中使用它们。

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

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实现的单指拖动:

/*单指拖动*/
var obj = document.getElementById('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);    

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

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

免责声明:文章转载自《jquery -- 触屏设备touch事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇使用Node.js给图片加水印的方法组合or继承下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

jQuery历史版本

jQuery 1.0(2006年8月):该库的第一个稳定版本,已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。 jQuery 1.1(2007年1月):这一版大幅简化了API。许多较少使用的方法被合并,减少了需要掌握和解释的方法数量。 jQuery 1.1.3(2007年7月):这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从...

[转]jqGrid 属性、事件全集

本文转自:http://blog.csdn.net/rosanu_blog/article/details/8334070 以下是jqGrid 最常用的属性和事件,经过一段时间的整理,终于弄的差不多了。版权所有,转载请注明出处,向您的厚道致敬!谢谢! [javascript]view plaincopyprint? <script type=...

jQuery缓存数据

很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> <script> div.getAttribute('data');// some data </script> 给页面中div添加了自定义...

JS组件系列——封装自己的JS组件

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程。 一、扩展已经存在的组件 1、需求背景 很多时...

基于jQuery实现简单的js模块化

在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解决这个问题。 首先相互影响主要有两个方面,一是js代码中定义的function名重复,导致覆盖问题;另一个是js操作页面元素时,大家使用的id、name、cl...

jqgrid 事件说明

Events(事件) 事件响应动作被设置为表格的属性,以下定义了行被选中时的响应: var lastSel; jQuery("#gridid").jqGrid({ ...    onSelectRow: function(id){       if(id && id!==lastSel){          jQuery('#gridid'...