A-A+

jQuery.event.move插件实现手机移动触摸功能例子

2016年01月09日 web前端设计 暂无评论 阅读 7 views 次

移动开发是目前非常流行的一个除pc之外用户最二多的客户端了,今天我们为各位介绍jQuery.event.move移动触摸开发插件,希望文章对各位有帮助.

jQuery.event.move是一个移动触摸开发插件,跟上一篇jquery.event.swipe的作者是同一个人,通过jQuery插件库自定义’movestart’, ‘move’ and ‘moveend’事件,移动鼠标和触摸事件提供设备设置按住到释放相互作用的一个简单的方法,轻量级移动网页开发插件。

jQuery.event.move移动触摸开发插件

移动的事件

MoveStart

解雇后MouseDown或touchstart,当指针越过一个门槛距离touchstart MouseDown或位置。

move

向每个动画帧在mousemove或touchmove改变光标位置。

MoveEnd

解雇后在最后一步或touchend,事件发生后,在触摸事件的情况时,手指开始移动已取消。

将事件对象的增加与性能:

e.pagex

e.pagey

指针当前页面坐标。

e.startx

e.starty

页面坐标的指针在MoveStart。

e.deltax

e.deltay

远程指针已经从MoveStart。

e.velocityx

e.velocityy

在像素/ MS的速度,在过去的几个事件平均。

使用方法,以同样的方式使用它们作为你通常绑定到事件在jQuery:

  1. jQuery('.mydiv')  
  2. .bind('movestart', function(e) {  
  3.     // move starts.  
  4. })  
  5. .bind('move', function(e) {  
  6.     // move .mydiv horizontally  
  7.     jQuery(this).css({ left: e.startX + e.deltaX });  
  8. }).bind('moveend', function() {  
  9.     // move is complete!  
  10. });  

为什么不直接使用原始的鼠标或触摸事件?

是的,你可以。但需要注意的写作jquery.event.move抽象了这种鼠标和触摸事件的相互作用模型时的细节:

支持鼠标和触摸设备,将同一事件API为节流阀移动到动画帧,防止不必要的电话,忽略鼠标右键点击修改键,防止在移动文本选择,防止触摸界面滚动而移动,支持多点触控,处理BUG(铬,可能所有的Android),包括涉及changedtouches没变,处理不同浏览器在接触iOS是活的物体,在Android它们是静态的,不博克形式输入在移动节点的相互作用.

抑制拖放事件

移动事件的目的是“帮助建立互动积木”。他们追踪单个 手指或单一的鼠标,并揭露性质对其事件对象用于检测。

关于拖动事件?

移动事件是为了拖动事件,其中两个有不同的含义:拖动事件是传输数据时移动事件是做出交互界面 said, movestart, move 和 moveend事件故意回声dragstart,drag和dragend事件,有一个显着性差异: 哪里drag你是否有事件触发连续移动指针或不,的move事件发生后指针已经移动。

其中一个dragstart任何移动事件绑定到同一个节点,拖动事件被抑制。

标签:

给我留言