jQuery 事件队列调整方法

2016-02-19 15:09 32 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享jQuery 事件队列调整方法教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发 】

大家都发现,通过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,是否可以抓的到呢?

来源:https://www.tulaoshi.com/n/20160219/1609014.html

延伸阅读
标签: Web开发
使用方法: 代码如下: $.hotkeys.add('键名', function(){ 要实现的目的}); //键名可以是单键,也可以是组合键例如:ctrl+c就表示同时按下ctrl和c. 取消某个键的事件: 代码如下: $.hotkeys.remove('键名'); 下载插件地址::http://code.google.com/p/js-hotkeys/downloads/list
标签: Web开发
用firebug查看其生成html,发现其checkobx是假的,只是一个span,来回的变样式而已,汗 代码如下: $(".tree-checkbox", tree).unbind(".tree").bind("click.tree", function() { if ($(this).hasClass("tree-checkbox0")) { $(this).removeClass("tree-checkbox0").addClass("tree-checkbox1"); } else { if ($(this).hasClas...
标签: Web开发
首先要知道DOM的两级模式:DOM0级和DOM2级 在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。 声明DOM第0级事件处理程序 代码如下: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" html head titleDOM Level 0 Events Example/title script type="text/javas...
标签: Web开发
页面大概是这样的,一个Partial View,而这个View包含了一小段绑定Search的Javascript,并且用Jquery-ui 的dialog 包含,而且确定不是ASP.net mvc生成HTML的问题,HTML是依照我的想法生成的,后来实在没有办法,把dialog的代码去掉,Search按就正常了。查了一下dialog的代码,发现 是appendTo引发的。 做了实验,代码如下: 代码 代码如下...
标签: Web开发
于是翻出了前年的Jquery中文文档。 大致浏览了下Jquery的方法。发现Jquery如此之强大,怎么以前就没有发现呢?于是就亲手写了基于Jquery的扩展函数,代码如下: 代码如下: jQuery.fn.__toggleCheck = function (idPrefix) { var c = false; $(this).click(function () { if (c) c = false; else c = true; $("input[type=checkbox][id...

经验教程

286

收藏

25
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部