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"&
4 &meta http-equiv="Content-Type" content="text/ 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&
$(function(){
$('#id_btn').bind('click',function(){
alert('启用ajax');
var $rtn = $.ajax('/?tn=_hao_pg',{dataType:'json'});
//alert('接收到的消息json；'+JSON.stringify($rtn));
var $rtn2 = $.ajax('/',
{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);
39 &/script&
40 &/head&
43 &a href="" &lianjie&/a&
45 &div class="img-container"&
&img alt="体坛风云" src="http://i0.pdim.gs/t01e55d0f747dc41727.jpg"&
&img alt="如果src属性值没有对应找到相应的图片，那么就显示我，我是img标签的alt属性" src="/daxixis/home?wvr=5&sudaref="&
&a href="/Wayou/p/jquery_plugin_tutorial.html"&参照这个&/a&
&a href="http:///Wayou/"&我的博客&/a&
&a href="/"&我的小站&/a&
&a href="/" onclick="return myalert(this.href,false)" &我的小站&/a&
67 &p&这是p标签不是a标签，我不会受影响&/p&
68 &input type="button" value="点击" id="id_btn"/&
69 &div style="width:200 height:200 background:red"&&/div&
70 &/body&
71 &/html&
a标签阻止跳转的关键代码：
&a href="/" onclick="return myalert(this.href,false)" &我的小站&/a&这里的onclick属性加了 return 这个关键字，因为myalert(msg,flag)这个方法会有一个返回值，如果返回值为false那么 onclick事件发生的时候就会return false，也就阻止了冒泡事件。
需要引入的my.js代码如下：
1 (function(j){
j.extend({
// extend用法1：扩展jQuery静态方法.
readName:function(name){
// alert(typeof this);
//chrome和IE：function
var type = typeof this.//chrome:
IE:undefined
// alert(typeof this.name);
alert(typeof this);
if(name==null||name==undefined||name==''){
alert('没有入参name！');
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('');
var defaults = {
'color': 'red',
'fontSize': '12px'
var settings = $.extend(defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
this.css('color','red');
46 })(jQuery)
阅读(...) 评论()综合上述，在a中调用js函数最适当的方法推荐使用：
a href=&javascript:void(0);& onclick=&js_method()&
a href=&javascript:;& onclick=&js_method()&
a href=&#& onclick=&js_method();&
我们常用的在a标签中有点击事件：
1. a href=&javascript:js_method();&
这是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
2. a href=&javascript:void(0);& onclick=&js_method()&
这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3.a href=&javascript:;& onclick=&js_method()&
这种方法跟跟2种类似，区别只是执行了一条空的js代码。
4.a href=&#& onclick=&js_method()&
这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
5.a href=&#& onclick=&js_method();&
这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
我看了下taobao的主页，他们采用的是第2种方法，而alibaba的主页是采用的第1种方法，和我们的区别是每个href里的javascript方法都用try、catch包围。
综合上述，在a中调用js函数最适当的方法推荐使用：
a href=&javascript:void(0);& onclick=&js_method()&
a href=&javascript:;& onclick=&js_method()&
a href=&#& onclick=&js_method();&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：62303次
积分：2301
积分：2301
排名：第11881名
原创：46篇
转载：748篇
(1)(1)(198)(280)(155)(92)(64)(12)(19)(1)温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(54773)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'a标签加入单击事件 屏蔽href跳转页面',
blogAbstract:'我们常用的在a标签中有点击事件：1. a href=\"javascript:js_method();\"这是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:0,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:5,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}18131人阅读
html基础（22）
不可以跳转
&a href=&javascript:;& onclick=&javascript:ToUrl('');&&
location.href不跳转测试1&/a&&&
&a href=&javascript:void(0);&
onclick=&javascript:ToUrl('');&&
location.href不跳转测试2&/a&&&
&a href=&javascript:void(0);&
onclick=&javascript:ToUrl('');&&
location.href不跳转测试3&/a&&&
&a href=&#& onclick=&javascript:ToUrl('');&&
location.href不跳转测试4&/a&&&
&a href=&###& onclick=&javascript:ToUrl('');&&
location.href不跳转测试5&/a&&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：411227次
积分：5680
积分：5680
排名：第3128名
原创：153篇
转载：81篇
评论：94条
(2)(1)(3)(3)(6)(5)(5)(7)(5)(2)(3)(2)(5)(11)(2)(4)(6)(2)(1)(2)(1)(2)(10)(2)(5)(10)(22)(9)(20)(5)(2)(22)(12)(7)(6)(11)(10)(1)a标签主要用来实现页面跳转，可以通过href属性实现，也可以在onclick事件里实现。
&a onclick="window.location.href=''" href="javascript:void(0);"&博客园&/a&
这段代码在主流浏览器里都没问题，但在IE6下会出现不能跳转的问题。这究竟是什么原因呢？
javascript:void(0);
void(arg);可以理解为永远返回null的函数，但是其参数不能为空。其参数可以为任意的表达式甚至函数。
&a href="javascript:void(name = '博客园'); alert(name);"&测试&/a&
IE6先运行DOM本身绑定的事件，如onclick；如果没有阻止冒泡，则会顺序执行href属性。而void(0);正是不需要执行任何事件，则IE6告诉浏览器不执行任何事件（覆盖之前的动作），并且终止冒泡相当于于是浏览器没有执行任何动作。所以只要在onclick事件内阻止冒泡事件即可。
&a onclick="window.location.href='';" href="javascript:void(0);"&博客园&/a&
这样在IE6下就可以正常运行了。
另外还有一种方法就是不使用javascript:void(0);而改使用#也可以避免，href属性内的#本来的意思就是锚点#name所以当不指定任何锚点时会到页面顶端。#是有特定意义的，默认是#top，如果#后有内容会被认为是一个标签而从页面找到相应标签跳转到该处，找不到会跳转到页首，如果不想让跳转，可以使用###，###就是一个无意义的标签指定。
阅读(...) 评论()}