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小技巧
Jul 21 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
vue 中swiper的使用教程
May 22 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 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数组函数
2008/08/18 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php新建文件的方法实例
2019/09/26 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python基础教程之循环介绍
2014/08/29 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python组合无重复三位数的实例
2018/11/13 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Python实现井字棋小游戏
2020/03/09 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
中国文明网签名寄语
2014/01/18 职场文书
建筑个人求职信范文
2014/01/25 职场文书
小学端午节活动方案
2014/03/13 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
春节请假条
2014/04/11 职场文书
解除劳动合同协议书
2014/09/17 职场文书
民主评议党员个人总结
2015/02/13 职场文书
小学安全工作总结2015
2015/05/18 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers