本文深入解析前端开发中的渐进增强与平稳退化概念。通过Google导航案例，展示如何利用JavaScript优化交互体验，同时确保不支持脚本的浏览器仍能正常访问。文章提供具体代码示例，详解onclick事件与return false的配合使用，帮助开发者实现功能增强与基础兼容的平衡。
渐进增强与平稳退化概念解析
以google.com.hk左上角的“更多”链接为例，该链接具备目标地址，但点击后通常会弹出一个下拉列表供用户选择，这是渐进增强的典型体现。其核心逻辑在于：当用户浏览器支持JavaScript时，即可享受这种快速导航的服务功能。
若禁用浏览器的JavaScript功能后再次访问该页面并点击“更多”，结果将直接打开一个新页面而非下拉列表，这属于平稳退化。其含义是：即使浏览器不支持JavaScript，用户依然能够正常访问网站内容。
功能实现原理与代码示例
如何实现类似Google的这种功能效果？
具体实现代码如下：
<script type="text/javascript">
function displayMenu() {
//显示导航列表;
}
}
<a href="目标页面" onclick="displayMenu(); return false;">更多»</a>解释：displayMenu()是一个用于显示导航列表的功能函数（此处省略其具体实现，因为讨论重点不在于此）。onclick属性指定了链接的点击事件。return false用于取消浏览器的默认行为，从而执行displayMenu()而不发生页面跳转，这一句不可省略（读者可自行尝试省略后的效果以加深理解）。
综上所述，如果浏览器支持JavaScript，onclick后的代码会被执行；如果不支持，则不会执行，进而发生页面跳转。这样无论浏览器是否支持JavaScript，用户都能顺利访问网站。
再看另一个类似例子：在新窗口中打开链接，但未指定target属性。如果用户浏览器不支持JavaScript，链接将在当前页面打开，示例如下：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在新窗口打开链接的另一种方式</title>
<script type="text/javascript">
function popup(url) { window.open(url); }
</script>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com/" onclick="popup(this.href); return false;">百度</a></li>
<li><a href="http://www.google.com.hk/" onclick="popup(this.href); return false;">google</a></li>
</ul>
</body>
</html>