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代码
Mar 16 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
浅谈js闭包理解
Apr 01 Javascript
JavaScript中while循环的基础使用教程
Aug 11 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
Mysql的常用命令
2006/10/09 PHP
关于时间计算的结总
2006/12/06 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
layui实现三级导航菜单
2019/07/26 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python实现目录树生成示例
2014/03/28 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python中turtle作图示例
2017/11/15 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python3实现转换Image图片格式
2018/06/21 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
几个人围成一圈的问题
2013/09/26 面试题
linux面试题参考答案(9)
2016/01/29 面试题
收款委托书范本
2014/09/11 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
大学生学年个人总结
2015/02/15 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
如何基于python实现单目三维重建详解
2022/06/25 Python