a标签阻止跳转的方法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="jquery-1.7.1.js"></script> 7 <script type="text/javascript" src="my.js"></script> 8 <script> 9 $(function(){ 10 $(\'#id_btn\').bind(\'click\',function(){ 11 alert(\'启用ajax\'); 12 var $rtn = $.ajax(\'https://www.hao123.com/?tn=95784386_hao_pg\',{dataType:\'json\'}); 13 //alert(\'接收到的消息json；\'+JSON.stringify($rtn)); 14 15 var $rtn2 = $.ajax(\'http://www.zhihu.com/\', 16 {dataType:\'text\'} 17 ).done(function(){ 18 alert(\'成功了：\'); 19 }).fail(function(xhr,status){ 20 alert(\'失败了：\'+xhr.status+\',原因：\'+status); 21 }).always(function(){ 22 alert(\'请求完成，无论失败或者成功都会返回\'); 23 }); 24 25 // .getResponseHeader(function(key){ 26 // alert(\'key:\'+key); 27 // }); 28 alert(\'接收到的消息html；\'+JSON.stringify($rtn2)); 29 }); 30 }) 31 32 /** 33 flag: fasle ,那么就阻止冒泡 34 */ 35 function myalert(msg,flag){ 36 alert(\'提示消息：\'+msg+\' ,flag:\'+flag); 37 return flag; 38 } 39 </script> 40 </head> 41 42 <body> 43 <a href="www.baidu.com" >lianjie</a> 44 45 <div class="img-container"> 46 <img alt="体坛风云" src="http://i0.pdim.gs/t01e55d0f747dc41727.jpg"> 47 <img alt="如果src属性值没有对应找到相应的图片，那么就显示我，我是img标签的alt属性" src="http://weibo.com/daxixis/home?wvr=5&sudaref=www.bing.com"> 48 </div> 49 <ul> 50 51 <li> 52 <a href="http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html">参照这个</a> 53 </li> 54 <li> 55 <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a> 56 </li> 57 <li> 58 <a href="http://wayouliu.duapp.com/">我的小站</a> 59 </li> 60 <li> 61 <a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a> 62 </li> 63 64 65 66 </ul> 67 <p>这是p标签不是a标签，我不会受影响</p> 68 <input type="button" value="点击" id="id_btn"/> 69 <div style="width:200px; height:200px; background:red"></div> 70 </body> 71 </html>
a标签阻止跳转的关键代码：
<a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a>
这里的onclick属性加了 return 这个关键字，因为myalert(msg,flag)这个方法会有一个返回值，如果返回值为false那么 onclick事件发生的时候就会return false，也就阻止了冒泡事件。
需要引入的my.js代码如下：
my.js:
1 (function(j){ 2 j.extend({ 3 // extend用法1：扩展jQuery静态方法. 4 readName:function(name){ 5 // alert(typeof this); //chrome和IE：function 6 var type = typeof this.name;//chrome: string ; IE:undefined 7 // alert(typeof this.name); 8 alert(typeof this); 9 if(name==null||name==undefined||name==\'\'){ 10 alert(\'没有入参name！\'); 11 12 }else{ 13 alert(\'入参name：\'+name); 14 } 15 } 16 }); 17 j.fn.WsetColor=function(options){ 18 alert(\'ddd\'); 19 var defaults = { 20 \'yanse\':\'green\', 21 \'zitiSize\':\'12px\' 22 }; 23 var settings = j.extend(defaults,options); 24 alert(\'yanse:\'+settings.yanse); 25 // return this.css({color:settings.yanse,fontSize:settings.zitiSize}); 26 // this.css({color:settings.yanse,fontSize:settings.zitiSize}); 27 //$("p").css("color","red"); 28 this.css("color","black"); 29 }; 30 31 32 j.fn.myPlugin = function(options) { 33 alert(\'22222222\'); 34 // var defaults = { 35 // \'color\': \'red\', 36 // \'fontSize\': \'12px\' 37 // }; 38 // var settings = $.extend(defaults, options); 39 // return this.css({ 40 // \'color\': settings.color, 41 // \'fontSize\': settings.fontSize 42 // }); 43 this.css(\'color\',\'red\'); 44 45 } 46 })(jQuery)
版权声明：本文为Sunnor原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。