HTML中的<a></a>标签点击不跳转的方法

一、<a href="http://www.mamicode.com/####" ></a>

使用这个方法我们会发现<a href="http://www.mamicode.com/#"> 点击链接后，页面会向上滚到页首，# 默认锚点为 #TOP，“#”包含了一个位置信息

二、<a href="javascript:void(null)"></a>

三、<a href="javascript:void(0)"></a>

四、<a href="http://www.mamicode.com/#" onclick="return false"></a>

以上这四种方法表示是一个死链接，既不会跳转也不会返回到顶部

Void是JavaScript中的运算符，出现在操作数之前，操作数可以是任何类型，操作数会照常计算，但忽略计算结果并返回undefined。由于void会忽略操作数的值，因此在操作数具有副作用的时候使用void来让程序更具语义，避免表达式返回值。 

void 操作符用法格式：

1. javascript:void (expression)

2. javascript:void expression

console.log(void 0); // undefined
console.log(void(0)); // undefined

作用一：替代undefined

由于undefined并不是一个关键字，其在IE8-浏览器中会被重写，在高版本函数作用域中也会被重写；所以可以用void 0 来替换undefined

作用二：客户端URL

这个运算符最常用在客户端URL——javascript:URL中，在URL中可以写带有副作用的表达式，而void则让浏览器不必显示这个表达式的计算结果。例如，经常在HTML代码中的<a>标签里使用void运算符

<a href="javascript:void window.open();">打开一个新窗口</a>

作用三：阻止默认事件

阻止默认事件的方式是给事件置返回值false

//一般写法

<a href="http://example.com" onclick="f();return false;">文字</a>

　　使用void运算符可以取代上面写法

<a href="javascript:void(f())">文字</a>

在这里面，void是一个操作符，会计算一个表达式，但是不会返回值，当然也就不会改变当前页面的任何内容，也就不会正常的跳转。
说明
void 运算符对表达式求值，并返回 undefined。在希望求表达式的值，但又不希望脚本的剩余部分看见这个结果时，该运算符最有用。 

链接（href）直接使用JavaScript：void（0）在IE中可能会引起一些问题，比如造成gif动画的停止播放等，所以比较安全的方法还是使用“#”。为了防止点击链接后跳转到页首，onclick事件return false即可。

<a>标签点击不跳转