jQuery 事件队列调整方法


Posted in Javascript onSeptember 18, 2009

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

<TEXTAREA class=javascript name=code rows=15 cols=50>$("a").click(function(){ 
    console.info("A"); 
    return false; 
}); 
</TEXTAREA>

但是A事件绑定后,我发现我需要B事件来决定其是否触发,好办,现在就改。
<TEXTAREA class=javascript name=code rows=15 cols=50>$("a").click(function(){ 
    console.info("B"); 
    return false; 
}); 
$("a").click(function(){ 
    console.info("A"); 
    return false; 
}); 
</TEXTAREA>

真的能够阻止后面的click事件触发吗?事与愿违。
如果B事件需要通过异步调用来判断A事件是否需要触发呢?
<TEXTAREA class=javascript name=code rows=15 cols=50>$("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; 
}); 
</TEXTAREA>

事实发现根本不可能,那怎么办呢?
先说几种思路:
将后绑定的事件通过另外一种触发,比如A事件是绑定在click上,那么B事件绑定在mouseover上,先触发mouseover再通过它来阻止click事件。(后来经过研究,发现这几乎是不可能的事情)
将2个事件通过jquery的queue进行处理。(这个确实可以解决先后触发的问题,但是现实的情况是项目中所有的事件绑定已经全部写好,目前需要每个按钮事件前都加上1个判断的AJAX请求。要不就是所有的按钮事件全部重写,要么另外寻找一条路)
深入jQuery的事件机制,获得其事件的队列,针对其事件队列进行处理。
<TEXTAREA class=javascript name=code rows=15 cols=50>//我们先让其默认绑定个事件,称其为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行必须取消注释。效果一样,原理不同... 
//delete(event[i]); 
    //that.click(B); 
    break; 
} 
</TEXTAREA>

问题貌似圆满解决,但是AJAX的callback函数中的return,是否可以抓的到呢?
Javascript 相关文章推荐
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vue文件运行的方法教学
Feb 12 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 #Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 #Javascript
javascript 面向对象编程 万物皆对象
Sep 17 #Javascript
javascript 面向对象编程 function也是类
Sep 17 #Javascript
类似CSDN图片切换效果脚本
Sep 17 #Javascript
var与Javascript变量隐式声明
Sep 17 #Javascript
html数组字符串拼接的最快方法
Sep 16 #Javascript
You might like
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
解析php常用image图像函数集
2013/06/24 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
浅析vue-router原理
2018/10/19 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
opencv+python实现均值滤波
2020/02/19 Python
加热夹克:RAVEAN
2018/10/19 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
2014年师德承诺书
2014/05/23 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
西湖英语导游词
2015/02/06 职场文书
实战Python爬虫爬取酷我音乐
2022/04/11 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技