ExtJs实现阻止冒泡，以及再次允许冒泡——stopPropagation的正确使用

需求如下：

↑ 图一：这是正常状态

 

↑ 图二：这是hover效果

 

↑ 图三：这是点击编辑按钮之后的状态

 

注：页面中是3个Panel ，每个Panel都绑定了点击事件。“输入框0”这不是Label而是一个readOnly为false的TextField，点击编辑的时候TextField可以编辑。

那么问题来了，每次点击TextField的时候都会触发上级Panel的点击事件（冒泡问题）！

 

解决代码：

 

listeners: {
            afterrender:function(){
                var father = this.ownerCt;            
                this.el.on("mousedown",function(){
                    if(this.dom.willValidate == true){
                        var thisId = this.id;
                        var thisIdS = "#"+thisId;
                        console.log("阻止冒泡");
                        $(thisIdS).click( function(event){event.stopPropagation();})
                    } else {
                        father.clickFn();
                    }
                });                    
            },
        }
 

 

 

 

对每个输入框监听鼠标 mousedown 事件（即点击事件的监听），然后调用 stopPropagation() 来阻止冒泡。

 

至于再次允许冒泡，好像无法直接恢复，所以直接再次调用父Panel的点击事件，来制造一个冒泡。

注：其中的 this.dom.willValidate 可用于对 “输入框是否可编辑 进行判断 ”，作用相当于 this.readOnly ，只不过此处无法获取 readOnly  属性。因为此处是在 element 内部进行判断操作的，而 readOnly  是属于Ext 对象的属性。