<!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. css的repaint和reflow

    css的repaint和reflow 浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow. 由于 reflow 是一种浏览器中的用户拦截( ...

  2. 【高级】C++中虚函数机制的实现原理

    多态是C++中的一个重要特性,而虚函数却是实现多态的基石.所谓多态,就是基类的引用或者指针可以根据其实际指向的子类类型而表现出不同的功能.这篇文章讨论这种功能的实现原理,注意这里并不以某个具体的编译器 ...

  3. [置顶] 【cocos2d-x入门实战】微信飞机大战之四：飞机登场咯

    转载请表明地址:http://blog.csdn.net/jackystudio/article/details/11757175 昨天收到了电子工业出版社寄过来的<cocos2d-x游戏开发之 ...

  4. DICOM医学图像处理：DCMTK在VS2012中的配置

    背景: 近期因为项目须要,将原本的开发IDE环境由VS2008升级到了VS2012.本以为编译完毕后的DCMTK开源库能够直接从VS2008移植到VS2012.可是通过项目属性加入完包括文件夹和依赖库 ...

  5. C++之static_cast, dynamic_cast, const_cast

    转自:http://www.cnblogs.com/chio/archive/2007/07/18/822389.html 首先回顾一下C++类型转换: C++类型转换分为:隐式类型转换和显式类型转换 ...

  6. EF 如何code first

    首先配置连接数据.sql server <connectionStrings> <add name="Model1" connectionString=" ...

  7. js 时间戳转换成时间格式，可自定义格式

    由于 c# 通过ajax获取的时间 传到前台 格式为:/Date(1354116249000)/ 所以需要转换一下,想要什么格式 更改 format() 里的 返回语句 就可以了 formatDate ...

  8. js 触摸事件

    js触摸事件 应用在移动端 webkit内核都支持. 触摸事件api https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html 事件 ...

  9. Retrofit2 上传图片等文件

    普通写法: //创建表单的普通字段public static RequestBody createFormBody(String content) { RequestBody body = Reque ...

  10. 修改spfile导致oracle无法启动

    今天尝试着调整一下数据库的性能,由于疏忽没有做好备份(spfile.ora),直接修改了MEMORY_TARGET参数,alter system set MEMORY_TARGET=4096m;导致重 ...