阻止a链接跳转方法总结

你的名字 2022-06-10 09:18 276阅读 0赞

> 有时我们会遇到这种需要在a标签上添加click事件，并且跳转前处理一些事务,因此需要做一些处理，看很多人会这样写

<a href="#">link</a>，

> 但是发现点击后页面返回了顶部，所以又出现了这样的写法等

> 但这样并不兼容所有浏览器，有些浏览器就会出现很怪异的形为。  
> 因此，这个问题还需要其它方法来解决。

### 方法一 ###

> void是一个操作符，void(0)返回undefined，地址不发生跳转

> 和以上相同，返回undefined

### 方法二 用return false ###

<a href="http://baidu.com" onclick="show()">百度</a> 
    <script> function show(){ alert("我没跳转"); return false; } </script>

> 执行完以上代码你会深刻领悟到js 的坑。  
> 首先你要知道 当 onclick 后面的事件不是一个函数名时，它会被包裹到一个匿名函数中执行。  
> 以上就相当于是

obj.onclick=function(){ 
        show();
    }

> 当点击链接的时候执行 onclick 里面的代码，而不是把show（）当作事件处理程序，  
> return false 只是在 show() 这个函数中返回了并没有在 onclick 事件中返回。  
> 因此还会发生跳转。
> 
> 重点在这里：在事件处理函数的工作机制中，当在给某元素添加事件处理函数后，一旦事件发生，相应JavaScript代码就会执行，所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后，如果相应JavaScript代码返回true，onclick事件处理函数就会认为这个链接被点击了，同样的若返回false即会认为链接未被点击。  
> 所以 可以这样写：

### 方法三 阻止默认事件 preventDefault() ###

> 但是preventDefault()阻止事件的默认行为不支持IE，所以在IE中要使用returnValue来阻止事件默认行为
> 
> （1）

> （2）

var test = document.getElementById('test'); 
             function stopDefault( e ) {  
                if ( e && e.preventDefault ) 
                  e.preventDefault(); 
                  else 
                     window.event.returnValue = false;  
             } 
             test.onclick = function(e) {        
                  stopDefault(e); 
             }