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

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

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

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

四、<a href="#" 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即可。