ExtJs實現阻止冒泡,以及再次允許冒泡——stopPropagation的正確使用
阿新 • • 發佈:2019-02-07
需求如下:
↑ 圖一:這是正常狀態
↑ 圖二:這是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 物件的屬性。