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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
ECMAScript6--解构
Mar 30 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
js在HTML的三种引用方式详解
Aug 29 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python中的元组介绍
2019/01/28 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
学生会干部自荐信
2014/02/04 职场文书
文科生自我鉴定
2014/02/15 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
读书活动总结范文
2014/04/26 职场文书
我的老师教学反思
2014/05/01 职场文书
加油口号大全
2014/06/13 职场文书
关于保护环境的建议书
2014/08/26 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书