a标签的使用

参考：http://wenku.baidu.com/view/c7d5e8b465ce0508763213aa.html

http://blog.163.com/wangzhenbo85@126/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>

 

posted @ 2016-03-23 11:54  JsonID  阅读(1188)  评论(0)    收藏  举报