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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
搞定immutable.js详细说明
May 02 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
php查询操作实现投票功能
2016/05/09 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
python 产生token及token验证的方法
2018/12/26 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
如何基于python测量代码运行时间
2019/12/25 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
关于Java String的一道面试题
2013/09/29 面试题
中专生自我鉴定
2013/12/17 职场文书
怎么写自荐书范文
2014/02/12 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript