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();
}
});
},
}
至于再次允许冒泡,好像无法直接恢复,所以直接再次调用父Panel的点击事件,来制造一个冒泡。
注:其中的 this.dom.willValidate
可用于对 “输入框是否可编辑 进行判断 ”,作用相当于 this.readOnly ,只不过此处无法获取 readOnly 属性。因为此处是在 element 内部进行判断操作的,而 readOnly 是属于Ext 对象的属性。