<!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. Office 2013

    Microsoft Office 2013 Professional Plus 32位简体中文版文件名: SW_DVD5_Office_Professional_Plus_2013_W32_ChnSi ...

  2. Android TextWatcher应用实例

    (1)使用TextWathcer限制输入字符个数布局中EditText在android布局中经常用到,对EditText中输入的内容也经常需要进行限制,我们可以通过TextWatcher去观察输入框中 ...

  3. Javascript 思维导图

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又 ...

  4. android项目 之 记事本（12） ----- 图片的等比例缩放及给图片加入边框

    本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...

  5. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  6. java 读文件 解析

    [Java]读取文件方法大全   1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile {     /**     ...

  7. 哈希长度扩展攻击的简介以及HashPump安装使用方法

    哈希长度扩展攻击(hash length extension attacks)是指针对某些允许包含额外信息的加密散列函数的攻击手段.该攻击适用于在消息与密钥的长度已知的情形下,所有采取了 H(密钥 ∥ ...

  8. java从c struct传来的字节数组中取值

    public int getInt(byte[] array,int index) { return (array[index]  & 0xff)  | (array[index + 1] & ...

  9. Jacob

    http://www.cnblogs.com/luckyxiaoxuan/archive/2012/06/13/2548331.html http://blog.csdn.net/qingwangyo ...

  10. 使用 Media Center 遥控器（Windows Vista Premium）

    本文适用于安装了 Windows Vista Premium 并附带遥控器的 HP 和 Compaq 台式电脑. 本文简要介绍了三种Windows Media Center 遥控器上每个按钮的功能. ...