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

Irma ·

更新时间:2024-11-15

· 524 次阅读

触摸事件(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来驱动触发。

鼠标事件事件 jQuery

1024 个赞