转自: http://www.itokit.com/web/13/2008/11/11634.html

超链接的href 和onclick引发的思考.
1、在Baidu空间中的发现
空间是一个功能简洁的Blog，但是它提供操作是比较方便的，一些常用的功能都使用模拟窗口作为界面，而不是要页面跳转或者新开窗口。& f* P- W- {0 r) f# s
我从HTML代码里面找到了创建分类的链接代码：
E% F
<a href=”/heero0w/creat/category/” target=”_blank” onClick=”openaddcat(’/heero0w/creat/category/’);return false;” tabindex=”-1″>增加新分类</a>:
这是一种非常健壮的代码结构，onclick里面的javascript代码执行后返回了false，相当于链接功能被屏蔽。但是，当 javascript被禁用或者onclick里面的代码执行出错时，链接功能还是正常的。当网速很慢导致openaddcat函数的代码还未被读取时，单击链接就会弹出了一个新页面。因此，用户点击这个链接之后就不会出现什么都没发生的情况，提高了用户体验
2、用同样的思路进行SEO优化
某些网站的列表页使用了AJAX进行分页，即换页的时候只刷新列表的部分，而不是整页刷新。代码可能是
<a href=”###” onclick=”jumpPage(2)”>第二页</a>

这种方式向来有一种缺点：SEO非常糟糕。搜索引擎基本上是不认识Javascript代码的，所以它搜不到除了第一页之后的内容。按照上面的思路，我们需要给href加上一个有意义的链接，让搜索引擎可以搜到该页。改进如下：<a href=”?page=2″ onclick=”jumpPage(2);return false;”>第二页</a>'
当然，这样写的前提是做两份页面，一份是AJAX分页时的处理请求的页面，另一份是常规分页页面。

3、改进
上面的链接代码不符合HTML与Javascript分离的原则，而且在openaddcat未被读取时按下链接的时候会导致浏览器报错（虽然功能正常），改进的方法是后期动态添加事件。HTML修改如下：
<a href=”/heero0w/creat/category/” id=”newCate” target=”_blank” tabindex=”-1″>增加新分类</a>
在页面底部写上添加事件的脚本：[code]var newCate = document.getElementById(”newCate”);
var createCategory = function(e) {
  openaddcat(’/heero0w/creat/category/');
e = e || event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
return false;
};
if (newCate.addEventListener) { 
    newCate.addEventListener(”click”, createCategory, false);
} else if (newCate.attachEvent) {
newCate.attachEvent(”onclick”, createCategory);!
}[/code]