web前端

在我们平时写练习的过程当中，经常会用到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( &#39;阻止成功&#39; )； 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 ( &#39;默认跳转阻止成功啦！&#39; )；
6. return false；
7. }
8. </script>

说明：这里我们绑定了一个点击事件，点击超链接以后，会先执行alert( &#39;默认跳转阻止成功啦!&#39; )，再进行默认的跳转动作。但是我们添加 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>