同步请求阻断事件冒泡的问题

0 0

同步请求阻断事件冒泡的问题3

参考这个图：

描述如下：
当我修改表单中的某一项时，此时鼠标还放在该输入框内，然后我点击保存按钮。此时正常的流程是：
1、触发change事件（Ext.form.Field）
2、触发按钮的handler
现在的问题是我在change事件中定义了一个同步请求，（这里必须是同步请求，不能使用异步，否则可能触发了保存而异步请求还没有返回）结果不触发按钮的handler了。改成异步请求，或者不发送请求事件都是可以正常传播的。
请问下这是什么道理？现在没有头绪解决这个问题。

问题补充：field.addListener('change',function(){
    var values = Utils.doSyncRequest('execFormula.json',params,'POST');       this.setRetObj(field,null,values);
},this);
就是上面这样，
handler的写法就是定义一个按钮那么简单：
var btn_save = new Ext.Button({
    text : '保存',
    handler : saveAction
});
现在是如果使用了上面的同步调用，根本不会执行到saveAction，页面上也没有执行点击按钮的操作，只会看到鼠标聚焦到按钮上，如下图的效果：

问题补充：

myali88 写道

change和handler分别针对不同组件，应该没有影响啊，难道直接都不能点击按钮？在你不发起change事件前

直接点击当然可以，现在就是当鼠标还放在那个field的时候，点击按钮。即先要触发change事件，接着触发按钮的handler，如果我不在change事件中定义了同步请求，这个流程是没有问题的。同步请求的话浏览器会处于等待状态，目前就是不知道是不是其他事件会被阻止了。

问题补充：

myali88 写道

那你可以测试一下，是否ajax同步请求会制止页面事件，你可以直接在body上绑定一个事件来测试。
另外，我想针对你的场景说说我的做法：因为你必须在请求返回后再做保存操作，那你可以在设计页面时，初始状态让按钮不可点击，然后使用异步ajax请求数据，在ajax的返回回调函数中根据条件把按钮设置为可用状态。
你认为这样如何？

没办法这么做，你根本不知道他会不会操作这个输入框，如果操作了，才需要调用返回后才能保存。

问题补充：

clue 写道

呃，前面的回复无视吧，那个缓冲人有在Ext.Editor中时才有

P.S. 不知道你是不是用的IE？其它浏览器有没有试过？
如果其它浏览器正常，那就要考虑规避了，IE的bug真是数不清的，它又没有自动升级功能。

在IE下，firefox下都会有这样的问题。

问题补充：

myali88 写道

引用

没办法这么做，你根本不知道他会不会操作这个输入框，如果操作了，才需要调用返回后才能保存。

我觉得这也正常啊，如果field的内容根本没有变化，那自然没有必要再点击保存按钮啊，只有当有改变了，才有必要去保存。

我是说我根本不知道用户会不会改变那个输入框，所以我的按钮肯定是启用的。

问题补充：我在body增加一个onclick事件

<body onclick="console.log(1);">

同时在同步请求后面增加一条日志

field.addListener('change',function(){ 
    var values = Utils.doSyncRequest('execFormula.json',params,'POST');	         this.setRetObj(field,null,values);	
console.log('after request');
},this);

可以发现onclick事件被拦截了，不会触发。如果我不使用同步请求，则会触发，答应出日志。
这个道理跟着firebug使用断点是一样的，我不使用断点，但是我在change事件里面随便加个请求，那么onclick也不会触发。
我觉得这可能是浏览器的行为，但是怎么解释，不知道谁能给个说明。

问题补充：不好意思，上面有错别字
这个道理跟firebug使用断点应该是一样的，我不使用同步请求，但是我在change事件里面随便加个断点，再执行过去，那么onclick也不会触发。

问题补充：我现在使用了一种补救的方式，可以参考看看

在change事件中定义了这个
//是否执行了同步请求
var syncRequest = false;
当执行了同步请求时设置为true，
同时在执行change请求后，

//3、如果此时【保存】按钮获得焦点，并且执行了同步请求，由此判定用户实际上是直接点击了【保存】按钮，但是因为执行了同步请求，导致点击不生效
						if(syncRequest && this.toolbar.btn_save.getEl().hasClass('x-btn-focus')){
							//手动执行保存动作
							this.toolbar.btn_save_handler();
						}

这里主要是判定焦点和是否执行了同步请求，如果是，则手动执行下保存动作。

问题补充：把上面的css改成x-btn-click。

EXT 事件同步请求

2012年2月16日 11:02

aimer311
0
0 0 2

查看图片附件

7个答案按时间排序按投票排序

0 0

2012年2月16日 20:00

clue
1478
0 0 0

添加评论

0 0

弄错了吧？Ext.form.Field中是根据blur事件来触发change的，而它使用了缓冲：（Ext3.1.0）

        // standardise buffer across all browsers + OS-es for consistent event order.
        // (the 10ms buffer for Editors fixes a weird FF/Win editor issue when changing OS window focus)
        this.mon(this.el, 'blur', this.onBlur, this, this.inEditor ? {buffer:10} : null);

所以，这里应该是先触发handler，再触发的change

2012年2月16日 19:57

clue
1478
0 0 0