<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript" src="jquery-1.7.1.js"></script>

 <script type="text/javascript" src="my.js"></script>

 <script>

     $(function(){

         $('#id_btn').bind('click',function(){

             alert('启用ajax');

             var $rtn = $.ajax('https://www.hao123.com/?tn=95784386_hao_pg',{dataType:'json'});

             //alert('接收到的消息json；'+JSON.stringify($rtn));

             var $rtn2 = $.ajax('http://www.zhihu.com/',

                 {dataType:'text'}

             ).done(function(){

                 alert('成功了：');

             }).fail(function(xhr,status){

                 alert('失败了：'+xhr.status+',原因：'+status);

             }).always(function(){

                 alert('请求完成，无论失败或者成功都会返回');

             });

             // .getResponseHeader(function(key){

             //     alert('key:'+key);

             // });

             alert('接收到的消息html；'+JSON.stringify($rtn2));

         });

     })

     /**

         flag: fasle ,那么就阻止冒泡

     */

     function myalert(msg,flag){

         alert('提示消息：'+msg+' ,flag:'+flag);

         return flag;

     }

 </script>

 </head>

 <body>

 <a href="www.baidu.com" >lianjie</a>

 <div class="img-container">

                     <img alt="体坛风云" src="http://i0.pdim.gs/t01e55d0f747dc41727.jpg">

                      <img alt="如果src属性值没有对应找到相应的图片，那么就显示我，我是img标签的alt属性" src="http://weibo.com/daxixis/home?wvr=5&sudaref=www.bing.com">

                   </div>

 <ul>

     <li>

         <a href="http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html">参照这个</a>

     </li>

     <li>

         <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>

     </li>

     <li>

         <a href="http://wayouliu.duapp.com/">我的小站</a>

     </li>

     <li>

         <a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a>

     </li>

 </ul>

 <p>这是p标签不是a标签，我不会受影响</p>

 <input type="button" value="点击" id="id_btn"/>

 <div style="width:200px; height:200px; background:red"></div>

 </body>

 </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:

 (function(j){

     j.extend({

     // extend用法1：扩展jQuery静态方法.

     readName:function(name){

         // alert(typeof this);      //chrome和IE：function

         var type = typeof this.name;//chrome: string ;  IE:undefined

         // alert(typeof this.name);

         alert(typeof this);

         if(name==null||name==undefined||name==''){

             alert('没有入参name！');

         }else{

             alert('入参name：'+name);

         }

     }

 });

     j.fn.WsetColor=function(options){

         alert('ddd');

         var defaults = {

             'yanse':'green',

             'zitiSize':'12px'

         };

         var settings = j.extend(defaults,options);

         alert('yanse:'+settings.yanse);

         // return this.css({color:settings.yanse,fontSize:settings.zitiSize});

         // this.css({color:settings.yanse,fontSize:settings.zitiSize});

         //$("p").css("color","red");

         this.css("color","black");

     };

     j.fn.myPlugin = function(options) {

         alert('22222222');

   //   var defaults = {

   //       'color': 'red',

   //       'fontSize': '12px'

   //   };

   //   var settings = $.extend(defaults, options);

   //   return this.css({

   //       'color': settings.color,

   //       'fontSize': settings.fontSize

   //   });

     this.css('color','red');

 }

 })(jQuery)

a标签阻止跳转的方法的更多相关文章

  1. 解决MUI阻止a标签默认跳转事件—方法总结

    用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...

  2. 5阻止A默认行为和JS实现页面跳转的方法

    <!--HTML中阻止A标签的默认行为: href="javascript:;" href="javascript:void 0;"--><! ...

  3. 阻止点击<a>标签链接跳转

      我们常用的在a标签中有点击事件(<a href="地址">链接</a>),其中“href”参数只要不为空,点击该链接时,页面会自动跳转:如果指定的“hr ...

  4. Web设计中打开新页面或页面跳转的方法 js跳转页面

    Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...

  5. 最齐全的站点元数据meta标签的含义和使用方法

    最齐全的站点元数据meta标签的含义和使用方法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的I ...

  6. a 标签的跳转属性

     a 标签中调用js的几种方法   我们常用的在a标签中有点击事件:1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在 ...

  7. embed标签 阻止点击事件 让父元素处理点击事件

    由于规定页面显示的PDF文件要有固定大小,使得页面风格统一 最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a ...

  8. 使用mui框架后a标签无法跳转

    由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添 ...

  9. 用select标签实现跳转

    用select标签实现跳转 一.用select标签实现跳转JavaScript代码 我们经常有遇到需要用select标签跳转到新网页的情况,dw生成的代码太复杂,那么有没有精简的代码得以实现呢?经过仔 ...

随机推荐

  1. 编程器NAND Flash 技术入门

    NAND Flash分类 SLC(Single-Level Cell)架构:单一储存单元(Cell)可储存1bit data MLC(Multi-Level Cell)架构:单一储存单元(Cell)可 ...

  2. 去掉Flex4生成的SWF加载时的进度条

    原文 http://www.cnblogs.com/modou/articles/1955507.html 方法一: <?xml version="1.0" encoding ...

  3. HDU 3507 Print Article（CDQ分治+分治DP）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=3507 [题目大意] 将长度为n的数列分段,最小化每段和的平方和. [题解] 根据题目很容易得到dp ...

  4. 追踪神秘的成都Uber：月入2万元是现实还是传说

    4月6日,一个视频在网上疯转——在上海,明星佟大为驾驶着售价近100万元的特斯拉电动汽车,作为一名Uber的司机满市转悠着拉客. Uber——优步,如果你不知道这个词,那就OUT了.就是这样的一款软件 ...

  5. 飘逸的python - 用urlparse从url中抽离出想要的信息

    最近有个需求,要检测配置中的那些url的域名是否都正常,即是否都能ping通. 不过配置中url格式是这样的 http://www.something.com:1234/ . 要ping的是www.s ...

  6. Cocos2d-x3.0 捕Android菜单键和返回键

    原文地址:http://blog.csdn.net/qqmcy/article/details/26172665 .h void onKeyReleased(EventKeyboard::KeyCod ...

  7. linux下用mail发送邮件

    利用外部邮箱发送邮件的方法 bin/mail会默认使用本地sendmail发送邮件,这样要求本地的机器必须安装和启动Sendmail服务,配置很麻烦,并且会带来不必要的 资源占用.而通过改动配置文件能 ...

  8. 在 win 10 中使用sql 2012 附加低版本数据失败的解决办法。

    随着win 10 的发布,我也尝试把自己的笔记本升级下,体验win10,由于自己电脑好长时间没有管理过,东西比较乱,一激动就格式了硬盘.但是所有的资料都丢失了,不过我都提前备份到网盘上.好了,废话不多 ...

  9. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  10. 2015年最棒的10个 JavaScript 框架

    JavaScript是最流行的前端开发程序设计语言.它为WEB开发者提供了能够设计出具有丰富功能.干净用户界面的WEB应用的能力.JavaScript框架使得WEB应用的设计变的简单,并且它能够提供很 ...