如何调整jQuery中的事件队列

时间: 2009-12-07 / 分类: jquery / 浏览次数: / 0个评论 发表评论

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

Js代码
  1. $(“a”).click(function(){
  2. console.info(“A”);
  3. return false;
  4. });
$("a").click(function(){
	console.info("A");
	return false;
});

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

Js代码
  1. $(“a”).click(function(){
  2. console.info(“B”);
  3. return false;
  4. });
  5. $(“a”).click(function(){
  6. console.info(“A”);
  7. return false;
  8. });
$("a").click(function(){
	console.info("B");
	return false;
});
$("a").click(function(){
	console.info("A");
	return false;
});

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

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

Js代码
  1. $(“a”).click(function(){
  2. $.ajax({
  3. url:“b.html”,
  4. success:function(msg){
  5. if(msg){
  6. console.info(“pass”);
  7. return true;
  8. }else{
  9. console.info(“nopass”);
  10. return false;
  11. }
  12. }
  13. });
  14. });
  15. $(“a”).click(function(){
  16. console.info(“B”);
  17. return false;
  18. });
$("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的事件机制,获得其事件的队列,针对其事件队列进行处理。
Js代码
  1. //我们先让其默认绑定个事件,称其为A事件
  2. $(“a”).click(function(){
  3. console.info(1);
  4. return false;
  5. });
  6. //现在我们要让后面绑定的B事件先触发,并且控制A事件是否触发
  7. //获取对象a绑定的事件对象中的click事件
  8. var event = $(“a”).data(“events”).click;
  9. //因为这个a在我们的B事件中也需要用到,为了防止this对象的改变,因此特地声明变量that保存
  10. var that = $(“a”);
  11. //下面就是B事件了,但是貌似好像没有绑定啊
  12. var B = function(){
  13. $.ajax({
  14. url:“b.html”,
  15. success:function(msg){
  16. if(msg){
  17. console.info(“pass”);
  18. tt.call(that);
  19. }else{
  20. console.info(“nopass”);
  21. }
  22. }
  23. });
  24. return false;
  25. };
  26. //关键对象,尽请对其多关注
  27. var tt;
  28. //关键代码,尽请多关注
  29. for(var i in event){
  30. tt = event[i];
  31. event[i] = B;//如果注释此行,下面2行必须取消注释。在FF中效果一样,原理不同…在IE中会循环调用…<br> //delete(event[i]);
  32. //that.click(B);
  33. break;
  34. }
//我们先让其默认绑定个事件,称其为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,是否可以抓的到呢?

来自:http://www.javaeye.com/topic/470816

发表评论

您的昵称 *

您的邮箱 *

您的网站