jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介


Posted in Javascript onDecember 03, 2015

触摸事件(touch)
在 jQuery Mobile 中有一些触摸事件是可定制的。然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap、taphold、swipe、swipeleft 和 swiperight。

tap(轻击):一次快速完整的轻击后触发

taphold(轻击不放):轻击并不放(大约一秒)后触发

swipe(滑动):一秒内水平拖拽大于30PX,或者纵向拖曳小于20px的事件发生时触发的事件。多长时间拖拽多少px可以设置的。这个事件有其相关联的属性,分别为

scrollSupressionThreshold (默认: 10px) ? 水平方向拖拽大于这个值,将不触发。
durationThreshold (默认: 1000ms) ? 滑动时间超过这个数值就不会产生滑动事件。
horizontalDistanceThreshold (默认: 30px) ? 水平划动距离超过这个数值才会产生滑动事件。
verticalDistanceThreshold (默认: 75px) ? 竖直划动距离小于这个数值才会产生滑动事件。
swipeleft(左划):划动事件为向左的方向时触发

swiperight(右划):划动事件为向右的方向时触发

 

要绑定这些事件,只需要在document.ready()中进行编程即可,如下代码示例:

<!DOCTYPE HTML>
<html>
<head>
 <title>Understanding the jQuery Mobile API</title>
 <link rel="stylesheet" href="jquery.mobile.css" />
 <script src="jquery.js"></script>
 <script type="text/java script">
  $(document).ready(function(){
   $(".tap-hold-test").bind("taphold", function(event) {
    $(this).html("Tapped and held");
   }); 
  });
 </script>
 <script src="jquery.mobile.js"></script>
</head>

<body>
 <div data-role="page" id="my-page">
  <div data-role="header">
      <h1>Header</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" id="my-list">
        <li class="tap-hold-test">Tap and hold test</li>
      </ul>
  </div>
 </div>
</body>
</html>

从上面的代码可以看到,将一个list列表跟taphold事件进行了绑定,当DOM加载完毕后,当触发taphold事件后,就会显示Tapped and held的提示信息。

虚拟鼠标事件
我们提供了一系列"虚拟的"鼠标事件试图把鼠标和触摸事件抽象 出来。这使得开发者能够给一些基础的鼠标事件,例如mousedown, mousemove, mouseup, 和click来注册监听。插件会在触摸环境中,插件会保持在传统鼠标环境下触发的顺序,例如:vmouseup总是在vmousedown之前被触发,vmousedown总是在 vmouseup 之前,等等。虚拟鼠标事件也会把书剑中放出的坐标信 息标准化。所以在基于触摸的设备中事件对象的pageX, pageY, screenX, screenY, clientX, and clientY这些属性的坐标都可以用。

vmouseover:处理touch 或者 mouseover的正规化的事件

vmousedown:处理touchstart 或者 mousedown 的正规化的事件

vmousemove:处理touchmove 或者 mousemove 的正规化的事件

vmouseup:处理touchend 或者 mouseup 的正规化的事件

vclick:处理touchend 或者 鼠标点击 的正规化的事件。在基于触摸的设备上,这个事件是在vmouseup事件之后触发的。

vmousecancel:处理touch 或者 mouse 的mousecancel的正规化的事件

警告:小心使用vclick
小心在触摸设备使用vclick。Webkit内核的浏览器会在touchend事 件触发后300ms自己生成mousedown, mouseup,和click 3个事件。 这些生成的鼠标事件的目标会在他们触发的时候被计算出来,并且 是基于touch事件的位置,并且有些情况下会在不同的设备上甚至 相同设备的不同OS会导致不同的计算结果。这就意味着原始的点击 事件的目标语浏览器自己生成的鼠标事件的目标元素可能不是同一个。
我们建议在触摸后可能会改变你点击的点下面内容的事件中,使用 click而不是vclick方法。这样的事件包括页面转场和其他的一些行为比如 收缩/伸展 这样 的 可能会导致屏幕有变化或者内容完全被替换的事件。

取消一个元素默认点击的行为
应用会调用一个 vclick 事件来取消某个元素的默认点击事件。在 基于鼠标的设备上,对vclick事件调用preventDefault()方法等同 于对真实点击的时间冒泡阶段调用 preventDefault() 方法。在基 于触摸的设备上就有点复杂了,因为真实的点击事件会在vclick 事件触发300毫秒之后触发。对于触摸设备,对vclick事件调用 preventDefault()方法会一些vmouse插件的一些代码来试图捕获下 一个点击事件。所以根据上述的警告,要匹配一个触摸事件和与他 对应的鼠标事件就比较困难,因为他们的目标是不同的。所以 vmouse插件试图通过坐标来识别一个相符的点击事件通常会失败。
有些情况下两个事件的目标和坐标的识别都会失败,这样就会导致 点击事件被触发或者元素的默认动作会被执行,或者内容被改变或 者替换的情况下,触发了别的元素的点击事件。如果这样的bug在给定的元素上有规律的发生,我们建议对于动作使 用click来驱动触发。

Javascript 相关文章推荐
一句话JavaScript表单验证代码
Aug 02 Javascript
jquery 插件开发备注
Aug 27 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
Seajs的学习笔记
Mar 04 Javascript
javascript操作excel生成报表示例
May 08 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
详解JavaScript对象和数组
Dec 03 #Javascript
java必学必会之static关键字
Dec 03 #Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 #Javascript
继续学习javascript闭包
Dec 03 #Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 #Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 #Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 #Javascript
You might like
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python切片知识解析
2016/03/06 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
django解决订单并发问题【推荐】
2019/07/31 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
什么是属性访问器
2015/10/26 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
大学毕业生个人总结
2015/02/28 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server