日本xxxx18视频在线观看-日本xxxx1819-日本xxxwww在线观看-日本xxx-日本xx-日本www在线视频

JavaScript 是很好的發(fā)明, 它讓網(wǎng)頁動了起來. 大家都喜歡這樣的那樣的頁面效果, 所以 JS 的使用日益廣泛, 甚至被依賴. 但你務(wù)必提醒自己, 絕大多數(shù)的瀏覽器都支持 JavaScript, 但不是全部.

上一篇文章中我簡單地講解了如何使用 JavaScript 實(shí)現(xiàn)滑動置頂效果. 那段調(diào)用 JS 代碼的 HTML 片段曾經(jīng)被我修改過兩次. 這次我們將會以它為例, 講解為什么不能完全依賴 JavaScript 并如何進(jìn)行處理.

1. 最初版本

清晰, 簡潔, 也可以實(shí)現(xiàn)滑動效果

1

<a href="javascript:goTop();">Top</a>

因?yàn)椴僮鞯膭幼鲿槐┞对跒g覽器的狀態(tài)欄中, 如果函數(shù)很多參數(shù)或者很多動作, 那么就會看到很長的一串, 看起來別扭而不美觀.

2. 修改版本 1

于是我將代碼修改了一下, 將真正被調(diào)用的 JS 方法隱藏起來, 代碼如下:

1

<a href="javascript:void(0);" onclick="goTop();">Top</a>

解決了上一個問題, 狀態(tài)欄只會顯示 "javascript:void(0);" 字樣, 而同樣存在滑動效果. 處理流程如下:

從流程中, 我們可以看到另一個問題, 兩個事件都是 JavaScript 動作, 如果 JS 被禁用或者瀏覽器不支持, 那么點(diǎn)擊按鈕后一點(diǎn)反應(yīng)都沒有.

3. 修改版本 2

為了兼顧沒有 JavaScript 支持的瀏覽器, 我又修改了一下代碼:

1

<a href="#" onclick="goTop();return false;">Top</a>

我們得了解一下鏈接的被點(diǎn)擊后的處理順序, 首先 onclick 事件會被觸發(fā), 接著是轉(zhuǎn)跳到 href 指向的鏈接, 我在 onclick 的最后加上 return false; 就是為了中斷處理, 不轉(zhuǎn)往 href 指定鏈接處.

如果瀏覽器支持 JavaScript, 滑動到頂部后中斷處理; 如果瀏覽器不支持 JavaScript, 則不會執(zhí)行 onclick 方法, 直接轉(zhuǎn)跳鏈接的錨回到頂部 (沒有滑動效果, 但卻是能回到頂部). 處理流程如下:

現(xiàn)在已照顧得算比較周全了, 但還是不夠完美. 更極限一些其實(shí)我們可以將 JavaScript 代碼和頁面代碼分離, 在 document ready 或者 onload 的時候加載頁面代碼.www.cssfan.cn

4. 未來版本

我準(zhǔn)備在新的模板中將 JS 完全分離出來, 日后我會專門起貼討論這種做法, 包括什么應(yīng)該在 document ready 時加載,