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 相关文章推荐
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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 如何利用phpexcel导入数据库
2013/08/24 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
Cookie 小记
2010/04/01 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python基本数据类型详细介绍
2014/03/11 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python 实现屏幕录制示例
2019/12/23 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
python3处理word文档实例分析
2020/12/01 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
初三家长会邀请函
2014/01/18 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书