9.9 技巧：监听Mobile事件
第4章解释了如何在Web浏览器中捕获标准的事件。Mobile设备使用的是“触摸手势”（touch gesture）而不是鼠标移动。jQuery Mobile对此进行了抽象。代码清单9-10演示了如何捕获一组挑选出来的典型的Mobile事件：轻击（tapping）、滑动（swiping）、方向变化（orientation change）以及页面变化（page change）。其他的Mobile事件随后会讨论。
代码清单9-10 捕获滑动、方向变化及更多事件
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Events</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14 <script>
15 $(document).ready(function() {
16
17 $.each(('tap taphold swipe swipeleft swiperight ' +
18 'orientationchange scrollstart scrollstop pageshow ' +
19 'pagehide').split(' '),
20 function( i, name ) {
21
22 $(document).on(name, function(event) {
23 $('#status').append('target = ' + event.target + ' ' +
24 'type = ' + event.type + ' <br>');
25 });
26 });
27 });
28 </script>
29
30 </head>
31 <body>
32
33 <div data-role="page">
34
35 <div data-role="header">
36 <h1>Events</h1>
37 </div>
38
39 <div data-role="content">
40 <p><a href="04b-link.html">Link to an external file</a></p>
41 <p><a href="04b-link.html" data-prefetch>Prefetch the
42 external file</a></p>
43 <p id="status">
44 </div>
45
46 </div>
47
48 </body>
49 </html>
运行这个示例时，你可以看到事件的行为及它们的处理程序。旋转你的设备，轻击、旋转并且向各个方向滑动，看看会发生什么。
表9-1列出了jQuery Mobile可以使用的事件。
第16～19行只包含了所有这些事件的一个选集。演示的事件是针对典型的移动端的用户交互。你可以使用表格中的其他事件来替换这些事件来学习一下jQuery事件机制的其他部分（如页面加载周期）。使用虚拟的鼠标事件，你可以微调对触摸和鼠标驱动设备的应用程序的控制。当设备使用了鼠标时，jQuery Mobile会自动构建正确的监听程序来处理该设备。当使用的是触摸设备时，事件会转换成触摸事件，顺序和鼠标驱动的事件一样。触摸和单击事件的信息是标准化的，这样触摸和单击就会返回相同的坐标数值。当使用虚拟的鼠标事件时，你可能想避免使用vclick事件。在基于WebKit的移动端浏览器上，这会导致300毫秒的延迟，这不但对用户来说显得“迟钝”，而且事实上会导致像“双击”一样的行为。
时间： 2024-09-14 22:24:22