触发方式：

触发方式针对的是mouseover和mouseout，它的流程跟点击方式是差不多的。

触发方式显示是指鼠标从外部元素进入触发元素（触发mouseover）的时候显示Tip。

在Add程序中会给触发元素的mouseover事件绑定以下程序：

addEvent(elem, "mouseover", BindAsEventListener(this, function(e){
    if (trigger.TouchShow) {
        if (this.CheckShow(trigger)) {
            this.ReadyShow(trigger.TouchShowDelay);
        } else if (this.Check(e.relatedTarget)) {
            clearTimeout(this._timer);
        };
    };
}));

跟点击方式类似，也需要执行一次CheckShow，但不同的是，还会用Check判断e.relatedTarget是不是外部对象。
这是因为mouseover可能是从触发元素的内部元素（包括Tip）进入或内部元素冒泡触发的，而这些情况不需要任何操作。

对应的，触发方式隐藏是指鼠标从触发元素或Tip离开时隐藏Tip。
当TouchHide为true时，在ReadyShow的时候会把_fTH绑定到触发元素的mouseout事件里：

trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH);

在Show的时候，再绑定到Tip的mouseout：

trigger.TouchHide && addEvent(this.Tip, "mouseout", this._fTH);

在ReadyShow绑定的原因同上，而Tip只需显示时绑定。

其中_fTH跟_fCH类似，也是在初始化时定义的一个属性，用于添加和移除触发隐藏事件：

this._fTH = BindAsEventListener(this, function(e) {
    if (this.Check(e.relatedTarget) && this.CheckHide()) {
        this.ReadyHide(this._trigger.TouchHideDelay);
    }
});

不同的是mouseout在Check的时候是用e.relatedTarget。

触发原理：

上面是从程序的角度说明了触发显示和隐藏的过程，但要真正理解的话还需要做一次细致的分析。
下面是以触发方式的显示隐藏为例做的流程图：

下面是文字说明：

1. 等待触发显示；
2. 进入触发元素，如果设置延时，跳到3，如果没有设置延时，跳到4；
3. 延时时间内，离开到外部元素，清除定时器，返回1，超过延时时间，跳到4；
4. 执行显示程序；
5. 显示Tip状态；
6. 离开触发元素，如果是进入到Tip，跳到7，如果是离开到外部元素，跳到9；
7. 保持显示状态；
8. 离开Tip，如果是进入触发元素，返回5，如果是离开到外部元素，跳到9；
9. 如果设置延时，跳到10，如果没有设置延时，跳到11；
10. 延时时间内，如果进入Tip，清除定时器，返回7，如果进入触发元素，清除定时器，返回5，超过延时时间，跳到11；
11. 执行隐藏程序，返回1；

再对照程序，应该就能理解整个流程了，当然可能还不是那么好理解。
这个流程也只是单例的情况，多例的时候还要多加一些判断。
可以说这个流程看似不难，但如果想做一个最优化的流程，那要考虑的细节地方可能会让人受不了。
点击方式跟触发方式的流程是差不多的，而且更简单，这里就不重复了。

出处：蓝色理想
责任编辑：bluehearts

上一页 JavaScript 浮动定位提示效果 [3] 下一页 JavaScript 浮动定位提示效果 [5]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。