井井客

搜索

jquery触摸屏幕事件

随着web浏览器,APP嵌入网页的技术成熟,jquery touch触屏事件可使用的地方也是无限延伸。

jquery触摸屏幕事件

[1]、三个主要的jquery触摸屏幕事件

这是普及的比较好的touch触屏事件,可以在绝大多数触屏设备的浏览器中浏览。

touchstart		触摸开始的时候触发
touchmove		手指在屏幕上滑动的时候触发
touchend		触摸结束的时候触发

[2]、触摸事件对应的触摸点(手指位置)列表

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

touches		    当前位于屏幕上的所有手指的列表。
targetTouches	    位于当前DOM元素上手指的列表。
changedTouches	    涉及当前事件手指的列表。

[3]、触摸点对应的触摸信息(常用)

identifier	一个数值,唯一标识触摸会话(touch session)中的当前手指
		一般为从0开始的流水号(android4.1,uc)
target		DOM元素,是动作所针对的目标

pageX		动作在屏幕X轴上发生的位置(包含滚动距离)
pageY		动作在屏幕Y轴上发生的位置(包含滚动距离)
clientX		动作在屏幕X轴上发生的位置(不包含滚动距离)
clientY		动作在屏幕Y轴上发生的位置(不包含滚动距离)
screenX		以屏幕为基准,X轴偏移位置
screenY		以屏幕为基准,Y轴偏移位置

[4]、不常用的触摸信息

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

[5]、小技巧

大家知道a标签的伪类hover、link、active与visited,是专为click事件而设计,所以在触屏网站中很少使用得上,当然经测试大部分也是不可用的。

但是这里有一个关于hover的小技巧,当你点击过一个按钮之后,这个按钮就会一直处于hover的状态,此时你基于这个伪类所设置的css也是起作用的,直到你用手指点击另外一个按钮,hover状态就会转移到另一个按钮

利用这一点,我们可以做出一些小效果。幸运的是此技巧在大多数浏览器中是可用的。

原文链接:http://www.cnblogs.com/hf8051/p/4571813.html

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:jquery触摸屏幕事件
本文链接:/c/15189.html

上一篇:前端开发中常用的20个正则表达式
下一篇:CSS3实现酷炫的下拉框特效

文章分类

相关阅读

随便看看