日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

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

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

1. 最初版本

清晰, 簡潔, 也可以實現滑動效果

1

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

因為操作的動作會被暴露在瀏覽器的狀態欄中, 如果函數很多參數或者很多動作, 那么就會看到很長的一串, 看起來別扭而不美觀.

2. 修改版本 1

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

1

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

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

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

3. 修改版本 2

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

1

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

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

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

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

4. 未來版本

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