点击方式：

点击方式显示是指点击触发元素的时候显示Tip。
在Add程序中会给触发元素的click事件绑定以下程序：

addEvent(elem, "click", BindAsEventListener(this, function(e){
    if (trigger.ClickShow) {
        if (this.CheckShow(trigger)) {
            this.ReadyShow(trigger.ClickShowDelay);
        } else {
            clearTimeout(this._timer);
        };
    };
}));

首先根据ClickShow判断是否进行点击显示，再用CheckShow检测是否同一个触发对象。

CheckShow程序是这样的：

if (trigger !== this._trigger) {
    this.Hide(); this._trigger = trigger; return true;
} else { return false; };

如果不是同一个触发对象，就先执行Hide清理前一个触发对象，防止冲突，再执行ReadyShow来显示。
如果是同一个触发对象，就说明当前是延时隐藏阶段，清除定时器保持显示状态就行了。

对应的，点击方式隐藏是指点击外部元素的时候隐藏Tip。
在ReadyShow里，当ClickHide为true时，就会把_fCH绑定到document的click事件里：

trigger.ClickHide && addEvent(document, "click", this._fCH);

注意这里要把隐藏绑定事件放到ReadyShow，而不是Show里面，因为延时的时候有可能还没有显示就触发了隐藏事件。

其中_fCH是在初始化时定义的一个属性，用于添加和移除点击隐藏事件：

this._fCH = BindAsEventListener(this, function(e) {
    if (this.Check(e.target) && this.CheckHide()) {
        this.ReadyHide(this._trigger.ClickHideDelay);
    }
});

注意不同于点击显示，由于绑定的是document，隐藏前要先确定e.target是不是外部元素。

其中CheckHide是作用是检查Tip当前是不是隐藏状态：

if (this._cssTip.visibility === "hidden") {
    clearTimeout(this._timer);
    removeEvent(this._trigger.Elem, "mouseout", this._fTH);
    this._trigger = null;
    removeEvent(document, "click", this._fCH);
    return false;
} else { return true; };

如果本来就是隐藏状态，清除定时器移除事件就行，不需要再执行Hide了。

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

上一页 JavaScript 浮动定位提示效果 [2] 下一页 JavaScript 浮动定位提示效果 [4]

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