href="javascript:func()" 跟href="#" onclick="javascript:func()"的区别

本文链接：https://blog.csdn.net/neverland_7/article/details/25803033

今天改bug的时候发现一个问题，即a标签的href="javascript:func()" 在不同浏览器上会有不一样的显示效果。这是之前都没有注意到的地方，在这里mark下。

先来看一段有问题的代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <script type="text/javascript" src="http://img1.91huo.cn/sharezx91/loupan/js/jquery-1.8.0.min.js"></script>
</head>
<body> 
    <a href="javascript:$('#pop_login').css('display', 'block');" >显示弹窗</a>
    <div id="pop_login" style="display:none;">我是弹窗</div>    
</body>
</html>

这段代码在不同的浏览器下，有不同的显示效果：

firefox（29.0.1）点击显示弹窗按钮，不会显示弹窗，整个页面被重写，显示[object Object]；

chrome（版本 34.0.1847.131 m）点击显示弹窗按钮，会在它下面显示出弹窗；

IE8点击弹窗按钮，显示效果跟firefox是一样的。

事实上，将执行代码直接赋给a标签的href属性是很不好的作法，不同的浏览器对事件处理程序的执行机制将会导致不同的结果。

那么有什么办法解决呢？

除了上面直接将事件处理程序直接赋给href属性外，比较常见的还有下面这种作法：

<a id="link" href="#" onClick="javascript:$('#pop_login').css('display', 'block');" >显示弹窗</a>

这种情况，oclick事件会先被执行，然后才执行href下的动作（通常是页面跳转，或 javascript 伪链接）。

这段代码，在浏览器中显示弹窗。但是这里又涉及到另一个问题，#其实包含了一个位置信息，用于设置锚点，默认是#top，即页面会滚动到顶部，这在很多情况下不是我们想看到的。那么，解决办法就是使用javascript:void(0)（或javascript:;）来代替#：

<a id="link" href="javascript:void(0)" onClick="javascript:$('#pop_login').css('display', 'block');" >显示弹窗</a>

javascript:void(0) 代表是一个死链接，href不会执行任何动作。这样看起来，这就是完美的解决办法，但是，在 IE6 里面有 ajax 事件可能会出现不执行的问题，所以这也不是很好的作法。

还可以使用###来代替#和javascript:void(0)，它在大多数情况下是不会出现问题的：

<a id="link" href="###" onClick="javascript:$('#pop_login').css('display', 'block');" >显示弹窗</a>

还有一种更好的办法，就是在onclick执行语句最后，添加'return false;'，它会阻止href下的动作，此时href里直接写#便可：

<a id="link" href="#" onClick="javascript:$('#pop_login').css('display', 'block');return false;" >显示弹窗</a>

当然，如果有考虑seo，可以考虑给a标题加上title属性，或者设置一个静态页面，说明类似这样链接的情况，并将链接赋给href属性（它是不会被打开的）。

以上所说的，都是不得不在html中添加javascript代码的情况，不然，这种HTML事件处理程序是不被推荐的，它没有很好的将HTML与javascript分离开。

最好的作法，当然是将二者分离，像下面这样：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <script type="text/javascript" src="http://img1.91huo.cn/sharezx91/loupan/js/jquery-1.8.0.min.js"></script>
</head>
<body> 
    <a id="link" href="#" title="显示弹窗">显示弹窗</a>
    <div id="pop_login" style="display:none;">我是弹窗</div>
    <script type="text/javascript">
    $('#link').click(function(){
	    $('#pop_login').css('display', 'block');
		return false;
	});
    </script>
</body>
</html>