在動態網頁中,常常需要在單擊超鏈接時處理一些數據,而不是跳轉一個網頁。在這種情況下,通常有以下三種處理方式:
不設置標簽的href屬性,只設置onclick屬性。在這種處理方式下,通常超鏈接文本會和正文的文本以相同的形式出現,即不會有默認的下劃線。當鼠標放在超鏈接上也不會顯示小手的形狀(除非為該超鏈接設置了CSS)。因此,用戶很難知道這是一個可以點擊的超鏈接。
將標簽的href屬性值設置為"#",并設置onclick屬性。在這種處理方式下,用戶可以很明顯地看出哪些文字是超鏈接。在單擊該超鏈接時,也可以執行onclick屬性值中的JavaScript語句,并且不會跳轉網頁。但是,由于href的屬性值為"#",瀏覽器會自動跳轉到當前網頁的頂部。如果當前網頁內容比較多,瀏覽器窗口出現下拉滾動條時,可以很明顯地看到跳轉,而這種跳轉往往不是網頁設計者的????????? 本意。
在沒有為標簽設置onclick屬性時,如果單擊了該超鏈接,瀏覽器會加載href屬性中的URL。如果href屬性值并不是一個URL,而是一個JavaScript語句的話,那么瀏覽器就會執行該語句。因此,可以直接將JavaScript語句寫在標簽的href屬性值中,讓href屬性代替onclick屬性。在這種處理方式下,既可以響應click事件,又可以不讓網頁跳轉。
在標簽的href屬性值中添加JavaScript語句之前,必須要先使用"javascript:"語句來聲明href屬性值中的語句為JavaScript語句。否則,瀏覽器會將href屬性值中的JavaScript語句當成是URL進行加載。請看代碼清單12-11,注意加粗的文字。
代碼清單12-11? 在超鏈接中使用事件
在超鏈接中使用事件第1個超鏈接
第2個超鏈接
第3個超鏈接
圖12-11? sample11.htm的
運行結果
在本例中創建了3個超鏈接,這3個超鏈接的處理方式如下所示:
第1個超鏈接中,沒有設置href屬性,因此,從圖12-11中看起來好像只是一行文字,并且鼠標放在上面的時候,也不會顯示小手的形狀。因此,很難讓用戶知道這是一個可以點擊的超鏈接。但是如果用戶單擊了該超鏈接,會彈出一個警告框,而且單擊警告框中的【確定】按鈕之后,不會跳轉到任何URL上。
第2個超鏈接中,href屬性值為"#",如果單擊該超鏈接,先會執行onclick屬性值中的JavaScript,彈出一個警告框。在單擊警告框中的【確定】按鈕之后,瀏覽器會自動跳轉到當前網頁的頂部。
第3個超鏈接中,直接將JavaScript語句寫在href屬性值中。在單擊該超鏈接時,可以執行href屬性值中的JavaScript語句,而且不會有任何跳轉。
讀者可以自己運行該文件查看效果。