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 相关文章推荐
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
Vue.js中的组件系统
May 30 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 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中使用Oracle数据库(1)
2006/10/09 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
深入理解React中何时使用箭头函数
2017/08/23 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python集合删除多种方法详解
2020/02/10 Python
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
三年大学自我鉴定
2014/01/16 职场文书
元旦活动感言
2014/03/08 职场文书
12岁生日演讲稿
2014/05/14 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
重阳节标语大全
2014/10/07 职场文书
教师考核表个人总结
2015/02/12 职场文书
简历中自我评价范文
2015/03/11 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技