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

写这篇文章的契机是由于公司最近一个系统项目,基于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属性里面的跳转链接,将要进行的操作写在方法里面即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值