参考：http://wenku.baidu.com/view/c7d5e8b465ce0508763213aa.html
http://blog.163.com/[email protected]/blog/static/1013632822012112794028742/
a标签经常用来跳转使用，经常出现的问题罗列如下：
问题一：点击a标签后页面会回到页面的顶部，
原因分析：代码如下
<a href="#" onclick="go(...);">跳转</a>
“#”是标签内置的一个方法，代表跳转到Top的作用
解决方案：替换“#”号为“###”，或者是在onclick中添加“rerurn false；” 改为如下代码
<a href="###" onclick="go(...);">跳转</a>
<a href="#" onclick="go(...);return false;">跳转</a>
问题二：页面假死（gif动画暂停等）或者 页面触发window.onbeforeunload事件
原因分析：代码如下
<a href="javascript:go(...);" >跳转0</a>
javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
解决方案：
<a href="javascript:void(0);" onclick="go(...);">跳转2</a>
问题三：获取不到event对象和window.event对象
原因分析：代码如下
<a href="javascript:go(...);" >跳转0</a>
这里的go函数是获取不到event对象和window.event对象的，可能是javascript：协议和事件的机制不一样没有默认触发事件参数
解决方案：代码如下
<a href="javascript:void(0);" onclick="go(...);">跳转2</a>
用onclick事件代替href调用
总结：
推荐写法：
<a href="javascript:void(0);" onclick="goUrl(‘http://www.baidu.com‘);return false;">跳转3</a><a href="#" onclick="goUrl(‘http://www.sina.com‘);return false;">跳转5</a> <a href="###" onclick="goUrl(‘http://www.sina.com‘);">跳转6</a>
有兴趣的同学可以看下我的测试代码
测试代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试用</title>
</head>
<body>
<div style="height: 1000px;width: 200px;background-color: green;"></div>
<a href="javascript:goUrl(this);" >跳转0</a>
<a href="javascript:;" onclick="goUrl(‘http://www.sina.com‘);">跳转1</a>
<a href="javascript:void(0);" onclick="goUrl(‘http://www.sina.com‘);">跳转2</a>
<a href="javascript:void(0);" onclick="goUrl(‘http://www.sina.com‘);return false;">跳转3</a>
<a href="#" onclick="goUrl(‘http://www.sina.com‘);">跳转4</a>
<a href="#" onclick="goUrl(‘http://www.sina.com‘);return false;">跳转5</a>
<a href="###" onclick="goUrl(‘http://www.sina.com‘);">跳转6</a>
<script type="text/javascript">
function goUrl(x){
var e = event || window.event;
window.location.href=x;
}
window.onbeforeunload=function(){
alert(‘before‘);
}
</script>
</body>
</html>
时间： 2024-10-03 21:54:22