需求如下：

↑ 圖一：這是正常狀態

↑ 圖二：這是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 物件的屬性。