RightClick、ExtendedClick 与 WheelWeb 应用程序的最主要目标之一就是让用户感觉他们像是在一个桌面应用程序上工作。换句话说就是让 Web 应用程序在视觉和感觉上都做到尽可能地与桌面应用程序一样。因此，如果一个用户想要一个工具栏显示在其桌面应用程序上的某个位置，那么 Web 应用程序也应尽量把这个工具栏放在同样的位置。这样就可以方便用户从桌面应用程序转移到 Web 应用程序，Web 应用程序的成功机率也会更大。
然而，Web 应用程序中有一个与桌面应用程序不一样的地方，那就是对鼠标事件的响应。也许您会对此心怀疑问，因为您的 Web 应用程序在您单击鼠标时工作得很好。当然，在大多数情况下，很多 Web 应用程序在处理鼠标左键单击事件时都会运行良好。实际上，多数人都习惯了只用鼠标的左键浏览 Web 站点，这时的 Web 应用程序更像是一个 Apple 应用程序，只用一个键。但所有 Windows® 应用程序都会使用两个鼠标键（有时甚至是 3 个键）。鼠标的左键用于激活命令，右键用于给出选项。我们已经习惯了这种用法，那么为什么还有这么多的 Web 应用程序忽略了鼠标右键呢。进一步说，Web 应用程序也忽略了 CTRL+单击、Shift+单击与鼠标滚轮的操作。那么在忽略了这么多鼠标操作的情况下，一个 Web 应用程序如何能真正地仿效桌面应用程序呢？一个真正的 Web 应用程序应该充分利用鼠标的功用。
要想弄清忽略鼠标右键单击的 Web 应用程序和没有忽略这些操作的 Web 应用程序之间的差别，以及额外的鼠标键如何能增强 Web 站点的功能，我们不妨比较一下 GMail 与 Yahoo Mail。这里先对 GMail 的粉丝们说声对不起，但在我看来，Yahoo Mail 在这方面的确比 GMail 做得好。在 GMail 中，对鼠标右键单击的处理与普通 Web 页面没什么区别。因此，当右键单击 GMail 中的一个消息时，它展示给您的只是诸如 “Back”、“Inspect Element” 或 “Select All” 之类的选项。这些动作与处理消息有什么关系呢？当然，这并不是说鼠标右键在 GMail 页面中没有任何作用。但我们与 Yahoo Mail 做一下比较，看看它是如何处理鼠标右键单击的。我们右键单击 Yahoo Mail 页面中的一个消息时，呈现给我的是包括 “打开”、“打印”、“回复” 和 “删除” 在内的选项。这些动作都是邮件应用程序中常用的。这些选项就让一个典型的 Web 应用程序非常类似于您在桌面上经常用到的邮件应用程序（试着右键单击 Outlook 中的一个消息，看看哪个 Web 应用程序所提供的选项更接近这些选项）。图 3 和图 4 显示了右键单击选项的区别。
图 3. Yahoo Mail 中的右键单击 图 4. GMail 中的右键单击 第一个帮助解决 Web 应用程序中鼠标单击问题的 jQuery 插件是 rightClick 插件。它既能捕捉鼠标右键单击，同时还能捕捉鼠标右键按下与松开。它还有一个功用就是让您能够关闭特定于浏览器的右键单击上下文菜单。显示在 FireFox（图 4）中的右键单击菜单在您选择将其关闭后就不会再出现了，这就让您能创建符合自已习惯的右键单击菜单而同时还不会与浏览器的默认行为发生冲突。
清单 2. rightClick 插件1
2
3
4
5
6
7
8
9
10
11
12
13
| // set up the div that will capture our events
<div id=rightClickSample></div>
// when the right mouse is clicked on this div, increase the width
// by 10 pixels. Also, do not show the browser-specific pop-up
// menu
// This, of course, should be in the $(document).ready function
$("#rightClickSample").rightClick(function(e){
$(this).width($(this).width()+10);
});
$("#rightClickSample").noContext();
|
现在，让我们来看看能扩展 Web 应用程序中的鼠标功能的另外一个插件。这个插件具有捕捉 Ctrl、Alt 和 Shift 键的能力。一些应用程序（例如 Adobe Photoshop）经常会用到这些键，所以有些人更愿意在使用鼠标时也能使用这些键。然而，借助 jQuery 核心代码来使用这些键非常困难，并且会增加额外的编码负担。为什么不使用预先做好的并经过测试的插件呢？
extendedClick 插件提供了代表不同帮助键组合的函数。这些函数包括 ctrlclick()、 shiftclick()、altclick()、ctrlaltclick()、ctrlshiftclick()、altshiftclick() 及 ctrlaltshiftclick()。但美中不足的是，这些函数只能被关联到鼠标左键单击按钮，正如之前的右键单击示例中所展示的，忽略了鼠标的另一半不是明智之举。然而，到目前为止，还没有一个插件能将帮助键关联到右键单击，将两者相结合以及创建一个新插件的工作就留给有志之士去做了。
让我们将右键单击的示例改掉，让 div 在按下 Shift+左键单击时增加 10 个像素、在按下 Ctrl+左键单击时减少 10 个像素。
清单 3. extendedClick 插件1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // set up the div that will capture our events
<div id=extendedClickSample></div>
// when the left mouse is clicked with the shift key held down,
// grow the div by 10 pixels
$("#extendedClickSample").shiftclick(function(e){
$(this).width($(this).width()+10);
});
// when the left mouse is clicked with the ctrl key held down,
// shrink the div by 10 pixels
$("#extendedClickSample").ctrlclick(function(e){
$(this).width($(this).width()-10);
});
|
能够消除桌面应用程序与 Web 应用程序差异的最后一个插件就是能够处理鼠标滚轮的这个插件。我敢打赌多数人都从来没遇到过一个允许使用鼠标滚轮的 Web 站点（除了 HTML 输入元素）。但这也不意味着要在一个应用程序中使用鼠标滚轮完全不可能。鼠标滚轮在应用程序中的应用之一是能让您上传图片的 Web 站点，可以通过鼠标滚轮来对图片进行放大或缩小。诚然，在桌面应用程序上也可以使用这个功能，但是在大多数 Web 应用程序中仍然可以吗？未必。
举个鼠标滚轮的例子，让我们用鼠标滚轮同样地控制 div 值的增加/减少。当向上滚动鼠标滚轮时，div 增加，当向下滚动时，div 的值减少。如果您的鼠标没有滚轮的话，那么就可以假设一下。
清单 4. 鼠标滚轮插件1
2
3
4
5
6
7
8
9
10
11
| // set up the div that will capture our events
<div id=wheelSample></div>
// attach an event handler for the wheel to this div
// notice that we use the e.delta to determine how many "notches" the wheel
// was moved. One notch is either 1 (if up), or -1 (if down). So, as
// a result, we can simply add it to the current width, letting the
// sign of the delta grow or shrink the div.
$("#wheelSample").wheel(function(e){
$(this).width($(this).width()+10*(e.delta));
});
|
这三个插件，我感觉，在使 Web 应用程序能在感观上更接近桌面应用程序方面是非常重要的。与 Web 应用程序进行交互时受到的鼠标左健单击的限制相反，这些插件允许 Web 应用程序捕捉所有形式的鼠标交互，正如一个典型的桌面应用程序所做的那样。此外，由于插件的应用将在今后的几年中越来越普遍，开发人员将会肩负起将现有的桌面应用程序转换成 Web 应用程序的责任。通过在 Web 上提供用户在桌面上已有的所有的鼠标交互，这些插件会使这种转换变得非常容易。 |
