如何调整jQuery中的事件队列

大家都发现，通过jQuery绑定事件是件非常容易的事情

$("a").click(function(){
	console.info("A");
	return false;
});

 但是A事件绑定后，我发现我需要B事件来决定其是否触发，好办，现在就改。

$("a").click(function(){
	console.info("B");
	return false;
});
$("a").click(function(){
	console.info("A");
	return false;
});

 真的能够阻止后面的click事件触发吗？事与愿违。

如果B事件需要通过异步调用来判断A事件是否需要触发呢？

$("a").click(function(){
	$.ajax({
		url:"b.html",
		success:function(msg){
			if(msg){
				console.info("pass");
				return true;
			}else{
				console.info("nopass");
				return false;
			}
		}
	});
});
$("a").click(function(){
	console.info("B");
	return false;
});

 事实发现根本不可能，那怎么办呢？

先说几种思路：

1. 将后绑定的事件通过另外一种触发，比如A事件是绑定在click上，那么B事件绑定在mouseover上，先触发mouseover再通过它来阻止click事件。（后来经过研究，发现这几乎是不可能的事情）
2. 将2个事件通过jquery的queue进行处理。（这个确实可以解决先后触发的问题，但是现实的情况是项目中所有的事件绑定已经全部写好，目前需要每个按钮事件前都加上1个判断的AJAX请求。要不就是所有的按钮事件全部重写，要么另外寻找一条路）
3. 深入jQuery的事件机制，获得其事件的队列，针对其事件队列进行处理。

//我们先让其默认绑定个事件，称其为A事件
$("a").click(function(){
	console.info(1);
	return false;
});
//现在我们要让后面绑定的B事件先触发，并且控制A事件是否触发
//获取对象a绑定的事件对象中的click事件
var event = $("a").data("events").click;
//因为这个a在我们的B事件中也需要用到，为了防止this对象的改变，因此特地声明变量that保存
var that = $("a");
//下面就是B事件了,但是貌似好像没有绑定啊
var B = function(){
	$.ajax({
		url:"b.html",
		success:function(msg){
			if(msg){
				console.info("pass");
				tt.call(that);
			}else{
				console.info("nopass");
			}
		}
	});        
        return false;
};
//关键对象，尽请对其多关注
var tt;
//关键代码，尽请多关注
for(var i in event){
	tt = event[i];
	event[i] = B;//如果注释此行，下面2行必须取消注释。在FF中效果一样，原理不同...在IE中会循环调用...
        //delete(event[i]);
	//that.click(B);
	break;
}

 问题貌似圆满解决，但是AJAX的callback函数中的return，是否可以抓的到呢？

评论

4 楼 jsnjlc 2009-09-24  

rainchen 写道

jquery的ajax有几个全局钩子，不知对你的问题有没帮助：

$.ajaxStart(function(){
this; // dom element listening
});

详细见
http://docs.jquery.com/Ajax_Events

谢谢，其实我之所以这么做是因为开发的时候权限验证部分的设计还没有完成，因此，也没有为其留下接口。等权限验证部分的设计差不多的时候，整个JS部分的框架已经构建的差不多了，此时再对框架进行大幅度调整不太适合，而且权限验证是AJAX的验证，因此，只能调整对象上已经绑定好的事件队列了。
我想，应该会有人和我有一样的需求，如果jQuery开放这部分的功能，我想功能会更加的强大。
你所提到的钩子我已经用了，作为404和500等报错使用。
顺便说下我的项目，是用Extjs和jQuery合作开发的。前端只有我一人，纯Extjs不太现实，工作量太大，而jQuery绑定事件等又方便，所以2者进行了融合。

3 楼 rainchen 2009-09-23  

jquery的ajax有几个全局钩子，不知对你的问题有没帮助：

$.ajaxStart(function(){
this; // dom element listening
});

详细见
http://docs.jquery.com/Ajax_Events

2 楼 jsnjlc 2009-09-22  

<div class="quote_title">kimmking 写道</div>
<div class="quote_div">
<div class="quote_title"><span style="font-size: x-small;">.click(function(e) {</span></div>
<div class="quote_title"><span style="font-size: x-small;">     e.stopPropagation(); //<span style="color: #c60a00;">阻止事件冒泡</span> </span></div>
<div class="quote_title"><span style="font-size: x-small;">     e.preventDefault(); //可以阻止浏览器默认事件 </span></div>
<div class="quote_title"><span style="font-size: x-small;">});</span></div>
</div>
<p>谢谢你的回复，但是，在jQuery中的AJAX是异步调用的，虽然可以改成同步，但是，AJAX无法阻塞线程，因此，我目前能够做的就是先将后续的事件剥离掉再重新调用。</p>
<p>如果您有更好的办法，欢迎指正。</p>

1 楼 kimmking 2009-09-18  

<div class="quote_title"><span style="font-size: x-small;">.click(function(e) {</span></div>
<div class="quote_title"><span style="font-size: x-small;">     e.stopPropagation(); //<span style="color: #c60a00;">阻止事件冒泡</span> </span></div>
<div class="quote_title"><span style="font-size: x-small;">     e.preventDefault(); //可以阻止浏览器默认事件 </span></div>
<div class="quote_title"><span style="font-size: x-small;">});</span></div>