javascript的漸進增強與平穩退化淺談_javascript技巧
- WBOY原創
- 2016-05-16 17:15:501924瀏覽
在google.com.hk的左上角，有一個更多的鏈接，它具有一個目標地址，但是當我們點擊時，大多數情況發現的是彈出一個下拉列表供用戶選擇（這是一種典型的漸進增強形式）。怎麼理解？ ——如果使用者的瀏覽器支援javascript，那麼就可以享受到這個快速導航的服務功能。
現在，請你禁用的你的瀏覽器的javascript功能（不會禁用猛擊這裡)，再次訪問google.com.hk，再次點擊更多時，發生了什麼？是的，沒有看到下拉列表，而開啟了一個新頁面。 （這是一種典型的平穩退化）。怎麼理解？ ——如果使用者的瀏覽器不支援javascript，使用者仍然能夠造訪我的網站。
如何實現類似google的這項功能？
複製代碼 代碼如下:
解釋：displayMenu()是一個顯示導航列表的功能函數（這裡省略它的實現，因為討論的並不是這個）
onclick指定了連結的點擊事件。
return false ： 取消了瀏覽器的預設行為（這樣就執行了displayMenu()，而不發生頁面的跳轉了），這個不可省略（當然你可省略試試看，有助於你的理解）
現在我們來看：如果你的瀏覽器支援javascript時，那麼onclick後的程式碼一定會被執行。否則，onclick後的程式碼不會被執行，那就會發生頁面的跳躍。這樣不管是否支援javascript，使用者都能順利的造訪我的網站。
下面是另一個類似的例子，它在新視窗中打開一個鏈接，但是我們並沒有指定target，如果用戶的瀏覽器不支援javascript，它將在當前頁面中打開鏈接，如下：
複製代碼 代碼如下:
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn