【Web前端基础知识】阻止a标签的跳转

在我们平时写练习的过程当中，经常会用到a标签来进行链接跳转。在很多情况下，我们不需要让A标签跳转到另外一个链接。我们会选择给我们会选择给a标签的href属性内容设置为#，成为一个锚点连接。

即设置为：

1. <a href="#">这是一个链接</a> 

但这时候我们也存在着一个问题，即如果页面过长有滚动条，且希望通过链接的 onclick事件执行操作，点击时就会跳转到页面的顶部，但很多页面不需要这样的效果，那今天我们就来给大家分享一下，如何阻止a标签的跳转。

第一种方法：

将它的 href属性设为 javascript:void(0); ，而不要是 #，这可以防止不必要的页面跳动;

即设置为：

1. <a href="javascript: void(0)">这是一个链接</a> 

第二种方法：

将它的 href属性设为 javascript:; ，js内容不写任何内容，即设置为：

1. <a href="javascript:;">这是一个链接</a>   

第三种方法：

假设链接中同时存在href与onclick，如果想让href属性下的动作不执行，onclick必须得到一个false的返值;所以我们可以使用在进行点击时return false这种方式，即：

1. <a href = "https://www.baidu.com"    
2.    onclick = "alert( '阻止成功' )； return false "    
3. >这是一个链接</a>   

但是这种方式html和js结构不分离，结构不够明确，所以我们可以使用下一种方法。

第四种方法：

1. <a href="https://www.baidu.com" >这是一个链接</a>   
2. <script>   
3. var link = document.getElementsByTagName("a") [0];   
4. link.onclick = function () {   
5.     alert ( '默认跳转阻止成功啦！' )；   
6.     return false；   
7. }   
8. </script>  

说明：这里我们绑定了一个点击事件，点击超链接以后，会先执行alert( '默认跳转阻止成功啦!' )，再进行默认的跳转动作。但是我们添加 return false;以后，点击事件函数会直接结束，不会再执行默认的跳转。

第五种方法：

但是如果想要给当前标签绑定多个事件时，使用普通 标签.onclick = function() {}方法添加事件时，会进行事件覆盖，所以有时我们会使用绑定事件，即标签.addEventListener( 事件类型，事件处理函数，是否捕获 )方法。在绑定事件中想要阻止默认事件要使用到事件对象event，之后使用event.preventDefault(),对于兼容IE浏览器的话，进行设置ev.returnValue = false;

1. <a href="https://www.baidu.com">这是一个链接</a>   
2. <script>   
3.     var link = document.getElementsByTagName("a") [0];   
4.     if ( link.addEventListener ) {   
5.     // 标准浏览器下绑定   
6.         link.addEventListener( "click"， fun，false)；   
7.    } else {   
8.     // 低版本IE浏览器下绑定   
9.          link.attachEvent( "onclick"， fun )；   
10.     }   
11.     function fun(ev) {   
12.     // 对事件对象做一个兼容处理   
13.         var ev = window.event || ev;   
14.         // 标准浏览器    ev.preventDefault();   
15.     // ie浏览器      ev.returnValue = false;   
16.     // 对于其中一个做判断，若有该方法则使用，没有则说明为低版本IE浏览器   
17.     ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;   
18.     }   
19. </script>