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语言中的Literal Syntax特性分析
Mar 08 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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/06/07 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python语法快速入门指南
2015/10/12 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
组织鉴定材料
2014/06/02 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
《窃读记》教学反思
2016/02/18 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python