天天看点

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.9 技巧:监听Mobile事件

本节书摘来自异步社区《jquery、jquery ui及jquery mobile技巧与示例》一书中的第9章,第9.9节,作者:【荷】adriaan de jonge , 【美】phil dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

第4章解释了如何在web浏览器中捕获标准的事件。mobile设备使用的是“触摸手势”(touch gesture)而不是鼠标移动。jquery mobile对此进行了抽象。代码清单9-10演示了如何捕获一组挑选出来的典型的mobile事件:轻击(tapping)、滑动(swiping)、方向变化(orientation change)以及页面变化(page change)。其他的mobile事件随后会讨论。

代码清单9-10 捕获滑动、方向变化及更多事件

运行这个示例时,你可以看到事件的行为及它们的处理程序。旋转你的设备,轻击、旋转并且向各个方向滑动,看看会发生什么。

表9-1列出了jquery mobile可以使用的事件。

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.9 技巧:监听Mobile事件
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.9 技巧:监听Mobile事件
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.9 技巧:监听Mobile事件
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.9 技巧:监听Mobile事件

第16~19行只包含了所有这些事件的一个选集。演示的事件是针对典型的移动端的用户交互。你可以使用表格中的其他事件来替换这些事件来学习一下jquery事件机制的其他部分(如页面加载周期)。使用虚拟的鼠标事件,你可以微调对触摸和鼠标驱动设备的应用程序的控制。当设备使用了鼠标时,jquery mobile会自动构建正确的监听程序来处理该设备。当使用的是触摸设备时,事件会转换成触摸事件,顺序和鼠标驱动的事件一样。触摸和单击事件的信息是标准化的,这样触摸和单击就会返回相同的坐标数值。当使用虚拟的鼠标事件时,你可能想避免使用vclick事件。在基于webkit的移动端浏览器上,这会导致300毫秒的延迟,这不但对用户来说显得“迟钝”,而且事实上会导致像“双击”一样的行为。

继续阅读