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脚本
Dec 03 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
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函数
2006/10/09 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
react-router中的属性详解
2017/06/01 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python 字典套字典或列表的示例
2019/12/16 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
爱的教育观后感
2015/06/17 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书