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中的arguments对象
Jun 20 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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 mysql数据库操作分页类
2008/06/04 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
应聘教师自荐信
2013/10/12 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
付款承诺函范文
2015/01/21 职场文书
政审证明范文
2015/06/19 职场文书
中学教师读书笔记
2015/07/01 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python