阻止a标签默认行为的几种简单方法

时间:2022-09-13 00:19:56

写这篇文章的契机是由于公司最近一个系统项目,基于dwz框架做的。框架内部获取内容的原理是使用ajax的load()方法来做的。所以自然会涉及到给定的元素的要先屏蔽其链接跳转,然后再使用ajax的原理进行内容加载和读取。
如下所示:
方法1:

<a href="http://www.baidu.com" id="test" onclick="stop()">  Click Me  </a> 

首先需要屏蔽掉a元素的默认跳转事件,然后再根据自己的需求写需要点击之后进行的操作。
代码如下:

function stop(event){
            //IE和Chrome下是window.event 火狐下是event
             event = event || window.event;
             if(event.preventDefault){
                event.preventDefault();
             }else{
                event.returnValue = false;
             }
             //target才是点击的元素 IE和谷歌下是srcElement 火狐下是target
             var target = event.target || event.srcElement;  
             //获取元素内部元素
             alert(target.innerHTML);
        };

方法2:

<a href="http://www.baidu.com" id="test">  Click Me  </a> 
 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); 
         } 

其实上两种方法原理一样。
方法3:

<a href="javascript:void(0)" id="test" onclick="stop()">  Click Me  </a> 

直接屏蔽掉href属性里面的跳转链接,将要进行的操作写在方法里面即可。