JavaScript 中的有限状态机，第 3 部分: 测试小部件

核心提示： FadingTooltip.prototype = {...actionTransitionFunctions: {...Inactive: {mousemove: function(event) {return this.doActionTransition('Inactive&

FadingTooltip.prototype = {
　　...
　　actionTransitionFunctions: {
　　...
　　Inactive: {
　　　　mousemove: function(event) {
　　　　　　return this.doActionTransition('Inactive', 'mouseover', event);
　　　　},
　　　 ...

用 Internet Explorer 进行进一步测试，很快就会发现另一个相似的意外情况，如图 3 所示。

图 3. Internet Explorer 中意外的 mouseout 事件

同样，从直觉上看，mouseout 事件之前应该发生 mouseover 事件，所以 mouseout 事件不应该出现在 Inactive 状态中。幸运的是，这个意外事件也很容易处理。在这种情况下，不需要操作或转换；只需让有限状态机忽略 Inactive 状态中的 mouseout 事件，如清单 5 所示。

清单 5. 处理 Inactive 状态下意外的 mouseout 事件的 JavaScript 代码

FadingTooltip.prototype = {
　　...
　　actionTransitionFunctions: {
　　...
　　Inactive: {
　　mouseout: function(event) {
　　　　return this.currentState; // do nothing
　　},
　　　...

在设计阶段，没有预料到在 Inactive 状态下会出现 mousemove 或 mouseout 事件。但是，在批评 microsoft 的浏览器中 mouseover 不符合预期之前，我们设想一下任何浏览器在这种情况下会发生什么：鼠标移动到 HTML 元素上并停留足够长的时间，让 FadingTooltip 部件能够淡入视图，显示一段时间，然后淡出视图。这会让有限状态机经历它的所有状态，返回到 Inactive 状态，而鼠标仍然停留在 HTML 元素上。然后，当鼠标移动时，任何浏览器都会在 Inactive 状态下生成 mousemove 或 mouseout 事件。这实际上在其他浏览器中也会发生，包括 Firefox。即使不考虑 Internet Explorer 中的 bug，这个有限状态机中也有一个设计缺陷，如图 4 所示。