|
觸發(fā)方式：
觸發(fā)方式針對(duì)的是mouseover和mouseout，它的流程跟點(diǎn)擊方式是差不多的。
觸發(fā)方式顯示是指鼠標(biāo)從外部元素進(jìn)入觸發(fā)元素（觸發(fā)mouseover）的時(shí)候顯示Tip。
在Add程序中會(huì)給觸發(fā)元素的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);
};
};
}));
跟點(diǎn)擊方式類似，也需要執(zhí)行一次CheckShow，但不同的是，還會(huì)用Check判斷e.relatedTarget是不是外部對(duì)象。
這是因?yàn)閙ouseover可能是從觸發(fā)元素的內(nèi)部元素（包括Tip）進(jìn)入或內(nèi)部元素冒泡觸發(fā)的，而這些情況不需要任何操作。
對(duì)應(yīng)的，觸發(fā)方式隱藏是指鼠標(biāo)從觸發(fā)元素或Tip離開時(shí)隱藏Tip。
當(dāng)TouchHide為true時(shí)，在ReadyShow的時(shí)候會(huì)把_fTH綁定到觸發(fā)元素的mouseout事件里：
trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH);
在Show的時(shí)候，再綁定到Tip的mouseout：
trigger.TouchHide && addEvent(this.Tip, "mouseout", this._fTH);
在ReadyShow綁定的原因同上，而Tip只需顯示時(shí)綁定。
其中_fTH跟_fCH類似，也是在初始化時(shí)定義的一個(gè)屬性，用于添加和移除觸發(fā)隱藏事件：
this._fTH = BindAsEventListener(this, function(e) {
if (this.Check(e.relatedTarget) && this.CheckHide()) {
this.ReadyHide(this._trigger.TouchHideDelay);
}
});
不同的是mouseout在Check的時(shí)候是用e.relatedTarget。
觸發(fā)原理：
上面是從程序的角度說明了觸發(fā)顯示和隱藏的過程，但要真正理解的話還需要做一次細(xì)致的分析。
下面是以觸發(fā)方式的顯示隱藏為例做的流程圖：
下面是文字說明：
- 等待觸發(fā)顯示；
- 進(jìn)入觸發(fā)元素，如果設(shè)置延時(shí)，跳到3，如果沒有設(shè)置延時(shí)，跳到4；
- 延時(shí)時(shí)間內(nèi)，離開到外部元素，清除定時(shí)器，返回1，超過延時(shí)時(shí)間，跳到4；
- 執(zhí)行顯示程序；
- 顯示Tip狀態(tài)；
- 離開觸發(fā)元素，如果是進(jìn)入到Tip，跳到7，如果是離開到外部元素，跳到9；
- 保持顯示狀態(tài)；
- 離開Tip，如果是進(jìn)入觸發(fā)元素，返回5，如果是離開到外部元素，跳到9；
- 如果設(shè)置延時(shí)，跳到10，如果沒有設(shè)置延時(shí)，跳到11；
- 延時(shí)時(shí)間內(nèi)，如果進(jìn)入Tip，清除定時(shí)器，返回7，如果進(jìn)入觸發(fā)元素，清除定時(shí)器，返回5，超過延時(shí)時(shí)間，跳到11；
- 執(zhí)行隱藏程序，返回1；
再對(duì)照程序，應(yīng)該就能理解整個(gè)流程了，當(dāng)然可能還不是那么好理解。
這個(gè)流程也只是單例的情況，多例的時(shí)候還要多加一些判斷。
可以說這個(gè)流程看似不難，但如果想做一個(gè)最優(yōu)化的流程，那要考慮的細(xì)節(jié)地方可能會(huì)讓人受不了。
點(diǎn)擊方式跟觸發(fā)方式的流程是差不多的，而且更簡(jiǎn)單，這里就不重復(fù)了。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) JavaScript 浮動(dòng)定位提示效果 [3] 下一頁(yè) JavaScript 浮動(dòng)定位提示效果 [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) JavaScript 浮動(dòng)定位提示效果 [4]
