工具提示是很多流覽器中一個非常有用的特徵，但是如果你計畫將它們作為你介面的一部分，可能會有一定的限制。如果你想在自己希望它們出現的時候就讓它們出現，而沒有被截短，並且包含更多的文本，為什麼不創建自己的工具提示呢？

在這個例子中，我們將在所有的元素中使用class、hastooltip，讓工具提示顯示。我們將獲得每個元素的title屬性中顯示的工具提示的資訊：

在本章前面的內容中，我們對流覽器事件進行了瞭解，你可能已經知道我們需要創建一些事件的監聽來知道層次（layer）什麼時候出現什麼時候消失。

工具提示通常是在你的滑鼠移動到一個元素上面的時候它會顯示在一個固定的位置，當滑鼠移走的時候它又會消失。JavaScript工具提示也可以跟在滑鼠劃過一個元素的時候跟隨滑鼠移動，但是我個人覺得這樣的設置非常的討厭。在我們的解決方案中，我們將關注mouseover和mousemove兩個事件：

在這段代碼中，我們已經創建了幾個功能，包括addLoadListener，getElementsByAttribute，attachEventListener功能，所以這段代碼是事件監聽功能：

在獲得跨流覽器event object之後，並且從base event 目標元素到一個class為hastooltip的元素，showtip開始創建tooltip（div）。tooltip的內容從目標元素的title屬性轉到tooltip中的一個文本節點。

為了確保流覽器不在我們的增強工具提示上面顯示自己的工具提示，目標元素的title會被清除掉——現在，流覽器中就沒有可顯示的工具提示了，也就不會與我們即將創建的工具提示相衝突了。不要擔心去掉title後的相容性問題：我們稍後還會再放回來的。

Opera在我們將它的字串設置為0值後仍然會顯示原始的標題。如果你希望在流覽器中避免顯示工具提示，你可以使用stopDefaultAction功能來停止mouseover的默認行動。你應該小心處理，防止影響其他的mouseover行為，比如顯示超連結的靜態位址欄。

為了顯示我們工具提示的樣式，我們可以基於目標元素的ID給工具提示元素分配一個ID（targetIDtooltip），並且設置tooltip的class。雖然這種做法允許通過CSS應用格式，但是我們無法提前計算工具提示的位置，所以我們必須使用滑鼠指標的協調機制，在事件發生的時候計算工具提示的位置。

這些都會將工具提示元素增加到body，所以當我們的滑鼠滑過鏈結的時候會神奇的出現一個提示，可以像圖13.1所示：

當滑鼠從這個元素上移開的時候，我們將工具提示從這個文檔刪除，它就會消失了：

在showtip中，我們創建了一個指向tooltip元素的鏈結並且作為目標元素的一個特性，做完了這些之後，我們可以不用搜索整個的DOM就將它去掉。在我們去掉工具提示之前，我們可以重新找回它的內容並且插入到目標元素的title中，這樣我們稍後就可以再用了。

你應該檢查在其他的事件監聽器中創建的目標，因為事件往往會熄火，你無法保證它們會按照設定的順序發生。

討論

上面代碼的一個問題就是如果目標元素接近流覽器視窗的右側或者底端，工具提示就會被削減。為了避免這種情況的發生，我們需要確保有足夠的空間可以顯示工具提示，並且將它們放在合適的位置上。

通過檢查滑鼠的位置是否比流覽器視窗的位置減去工具提示的寬度要小，我們就可以知道為了可以再螢幕上合適的現實如何的去做了：

這個功能與先前插入工具提示元素的方法相似。在插入元素之前，我們將它的invisibility設置為“隱藏”。這就意味著它被放置在頁面上，如果可見的話，layer會在頁面上佔據同樣的位置，但是用戶實際上是看不見的。這就讓我們可以測量工具提示的維數，然後將它們放在合適的位置上而用戶又看不見。

為了檢測layer是否放置在了viewpoint外側，我們使用游標相對於視窗的位置。理論上，這個資料可以通過clientX/clientY獲得，但是記住：Safari給出的這個值是個錯誤的值。相反，我們應該使用cursorPosition內的跨流覽器值並且提取滾動位置（這個值就等同於clientX/clientY）。Viewport的大小通過getViewportSize功能獲得，對於每個dimension來說，我們檢查是否滑鼠位置加上layer的大小會比viewport更大。

如果layer的一部分會顯示在viewport外面，我們可以通過在viewport大小中提取它的dimension來放置它，或者，使用游標位置正常放置。

有一個例外就是， layer可能會在兩個方面都顯示在viewport外面，當我們垂直放置它的時候，它會自動位於游標上面。這就防止layer直接顯示在游標上面並且會引發一個mouseout事件。它同時避免目標元素被工具提示所模糊而阻止了用戶點擊。

為了測量工具提示的尺寸，工具提示首先必須追加到檔。這會自動讓它顯示在網頁上，阻止用戶看見它顯示在錯誤的位置上，我們需要隱藏它。我們通過設置它的可見度（visibility）為“隱藏”直到我們最後確定工具提示的位置。

我們在這裏不能使用更多我們熟悉的顯示屬性，因為顯示屬性設置為none的目標是不會被遞呈的，所以無法測量它們的大小。

推薦給同仁
 

您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com 
Email: info@rank-ad.com

在這裏，this指向ID為mylink的鏈結。我們可以使用它獲得這個鏈結的href屬性。

但是，如果你使用W3C事件監聽器，事件（event）的target作為event object的一部分存儲，在不同的流覽器中存儲在不同的property下面。IE將target存儲為srcElement，而其他的流覽器存儲為target。但是，這些property指向的元素不是事件監聽確定分配的事件。

事實上，不同層次的元素受事件的影響。來看如下的HTML。

如果一個click事件監聽被放在一個段落中，一個用戶點擊了這個click，這個段落的click 事件處理（event handler）就會執行，但是事件的目標將是超連結。有些流覽器（最明顯的就是Safari）甚至將鏈結內包含的文本節點isuan為目標節點。

我們可以編寫一個function返回事件的目標，而不論哪個property被執行，但是這並不能解決我們找尋我們原始應用事件監聽的元素。通常，最好的解決方法就是重複流覽器提供的事件目標，直到我們找到那個原始的元素為止。為了做到這點，我們可以按照元素標籤的名稱、class以及其他屬性進行檢索。

提煉事件目標的function可以是這樣的：

If-else可以跨流覽器找回事件目標，如果目標被流覽器報告為文本節點，while迴圈可以找到最上級的非文本節點。

如果我們想要返回被點擊的那個元素，我們可以調用getEventTarget:

因為我們知道，這這種情況下，事件處理功能只會附件到連接上（<a>標籤），我們可以重複事件目標，檢查節點名稱“a”。我們找到的第一個將是handler分配到的鏈結，這就確保了我們不是在鏈結內部查找一些元素（比如strong或者span）。

很明顯，查找target的方法並不是很理想，而且也不是100%的準確，除非你知道準確的HTML，最近，關於這個問題進行了很多研究，而且有很多解決方法都提供了在DOM 0處理器下與this相同的變數，而且在支援W3C的流覽器（不是IE）中，也有了一些解決的方法。

其中一個解決方法就是讓事件監聽功能成為IE目標object中的一個方法。然後，當調用這個方法的時候，this就會自然的指向那個被調用的方法。這就要求attachEventListener和detachEventListener同時進行修正：

在Peter Paul Koch的improved addEvent competition中對這些內容進行了詳細的說明。

Dean Edwards提出的另一個解決方法就是完全避開W3C使用DOM 0，具有可以單獨的增加或者去除的功能。

雖然這兩種方法都可能是非常不錯的方法，但是他們都沒有經過完整的測試，所以，我們將使用我們瞭解其優缺點的那種方法。另外，重複尋找一個事件的目標並不是不可靠的。

在使用DOM 0 事件處理器的時候，一旦你指向了一個元素，這個元素的事件你想處理，這只是一個簡單的將一些功能分配給適當的屬性的問題：

你會發現，在功能分配上（button.onclick=engage;），圓括號不跟隨功能的名稱。它們會很快執行功能，並且指定返回值（return value）作為event handler，通過忽略圓括號，你可以講function本身分配到handler。這也就意味著你無法直接給handling function提供意見（argument）：function必須通過其他方式獲得它所需要的資訊。

除了給一個已命名的function提供一個reference，你可以給一個event handler提供一個Anonymous Function：

取決於你是否需要重新調用handling function（以及你自己的coding preferences），這種方法是編寫event handling code的一個比較簡單的方法。

Handling function返回的值取決於那個事件的默認行動（default action）是否發生，所以，在之前的代碼中，如果mybutton是一個超連結，當被點擊之後，它的默認行動就是導向它的href位置。通過返回false，engage function不會允許默認的行動發生，超連結導航也不會發生。如果返回的值是true，event handling 功能的代碼執行以後默認的行動就會發生。

當一個事件發生之後，關於那個事件如何發生的、為什麼發生的，在哪里發生的，詳細的資訊都會寫入event object，在IE 中，它寫入的格式是window.event，但是在其他的流覽器中，它會以argument的形式提交給event-handling function。在handling funciton中，這點差異很容易分開：

Event object允許你瞭解很多詳細的資訊，比如哪個元素被點擊了，是否有關鍵的內容被點擊，事件的調整（比如，滑鼠點擊的時候，游標的位置在哪里），以及激發功能的事件類型。很多事件屬性名稱在不同流覽器中都是相同的，但是有些流覽器會有所不同。Mozilla的event property可以在Gecko DOM Reference中查看，而Mozilla的event property可以再MSDN中查看。對於那些在不同流覽器中名稱不同的property，想過的問題可以通過object detection來調整，在以後的內容中我們將進行詳細的講述。

推薦給同仁

 

您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com 
Email: info@rank-ad.com