a href="" 和 href="#" 以及 href="javascript:void(0)"时 以及其中的 onclick 的区别

今天遇到一个问题,代码如下：

<div class="moblie right" id="moblie" style="position:absolute; bottom:0;">

<a href="" id="closeMoblie" onclick="closeMoblie();" ><img alt="" src="image/index/closeMoblie.png" /></a>

</div>

function closeMoblie(){

document.getElementById("moblie").style.display = "none";

}

当点击的时候会闪一下，但是不会消失，为什么呢？

首先，注意到的是href="",其实平时都会写成href=“#”的，那么有什么不同呢，百度了一下，现在顺便也介绍 href="javascript:void(0)"

href="" ：默认刷新一下，然后重新链接到 本页

href=“#”：链接到本页头部，但是不会重新刷新

href="javascript:void(0)"：他是一个死链接，也就是不会链接到任何页面，以及做任何JavaScript动作

然后，吧href=“”改为href=“#”真的成功了，同时，页面滚动到了头部；

那么久引出来了一个新问题，是不是再a上发生href和onclick的时候onclick先发生，href后发生呢？

经过几次实验，可以肯定了。于是又引出来了一个新问题，是否可以让href不作为？当然是可以的啦，方法有很多：

其一：就是用href="javascript:void(0)"，他本来就是个死链接，看起来就是不作为的样子，那么如何让他真的不做为呢？

其二：如果你像上面一样，再html中使用onclick，那么就需要在函数调用的后面再调用一个return false，如下：

<a href="" id="closeMoblie" onclick="closeMoblie();
return false;" ><img alt="" src="image/index/closeMoblie.png" /></a>

此时你可能会想，就算要加return false 为什么一定要在html 的a中加呢，反正都要调用closeMoblie(),直接在closeMobile()里面加就好啦！

可是如果你只是这样：

<div class="moblie right" id="moblie" style="position:absolute; bottom:0;">

<a href="" id="closeMoblie" onclick="closeMoblie();" ><img alt="" src="image/index/closeMoblie.png" /></a>

</div>

function closeMoblie(){

document.getElementById("moblie").style.display = "none";

return false;

}

这是行不通的，因为，onclick=“”的冒号里面相当于是一个匿名函数的内容，在一个匿名函数里面调用closeMoblie()，里面返回的false只是匿名函数中得到的一个值而已，他对a并没有什么作用，甚至说，这个值根本就没被用上，就像这样

function（）{closeMoblie()；} 因为没有任何变量接收返回的false值，所以false值根本就是个没用的东西。

除非，你这样：

<a href="" id="closeMoblie" onclick="return closeMoblie();" ><img alt="" src="image/index/closeMoblie.png" /></a>

function closeMoblie(){

document.getElementById("moblie").style.display = "none";

return false;

}

此时你可能会想，为什么要用return false ，不是还有一个更好的阻止默认行为的方法吗，如果你想说的是e.preventDefault(),那么我告诉你这里行不通，因为，e不见了，此时只能用方法三

其三，不在html上加onclick，而只用JavaScript加，如下：

<div class="moblie right" id="moblie" style="position:absolute; bottom:0;">

<a href="" id="closeMoblie" ><img alt="" src="image/index/closeMoblie.png" /></a>

</div>

document.getElementById("closeMoblie").onclick=closeMoblie;

function closeMoblie(){

document.getElementById("moblie").style.display = "none";

}

这样就行了？这样就能阻止默认行为？当然不是，这里只是告诉你可以这样加句柄而已，实际上对于句柄，因为会把 会默认传输一个参数e

function closeMoblie(e){

document.getElementById("moblie").style.display = "none";

}

e可以换成任何的其他名字，它就代表着a被点击这件事，也就是event

此时可以这样：

function closeMoblie(e){

document.getElementById("moblie").style.display = "none";

if(typeof e.preventDefault === 'function'){ //w3c

e.preventDefault();

e.stopPropagation();

}else{ //ie

e.returnValue=false;

e.cancelBubble=true;

}

}

e.preventDefault() 和 e.returnValue=false 分别是w3c和ie 对阻止默认行为的定义，而e.stopPropagation和e.cancelBubble=true是阻止冒泡的定义，

在这里有用的是e.preventDefault() 和 e.returnValue=false

注：这篇文章里提到的return false 和 e。stopPropagation的函数都可以具体去了解一下