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 相关文章推荐
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
vue实现点击追加选中样式效果
Nov 01 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 4.2书写安全的脚本
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Windows下安装Scrapy
2018/10/17 Python
python3对接mysql数据库实例详解
2019/04/30 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
解决方案设计综合面试题
2015/08/31 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
乡镇党建工作总结2015
2015/05/19 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
vue中data里面的数据相互使用方式
2022/06/05 Vue.js