與懸停事件或鼠標懸停

Question

擴展sap.ui.core.Icon我擴展了懸停事件處理sap.ui.core.Icon：

sap.ui.define(function() { 
    "use strict"; 
    return sap.ui.core.Icon.extend("abc.reuseController.HoverIcon", { 
      metadata: { 
       events: { 
        "hover" : {} 
       } 
      }, 

//   the hover event handler, it is called when the Button is hovered - no event registration required 
      onmouseover : function(evt) { 
       this.fireHover(); 
      }, 

//   add nothing, just inherit the ButtonRenderer as is 
      renderer: {}    
     }); 
}); 

事件的onmouseover永遠不會被解僱。我也用這個擴展名爲sap.m.Button和它works。但我需要這個sap.ui.core.Icon。

我也試過this jquery的例子，但它根本沒有工作。

$("testIcon").hover(function(oEvent){alert("Button" + oEvent.getSource().getId());}); 

請問，你知道爲什麼事件處理程序onmouseover沒有調用sap.ui.core.Icon嗎？或者你能否提出一些其他解決方案？

貝婁是我如何添加圖標，我sap.suite.ui.commons.ChartContainer：

 var oFilterIcon = new HoverIcon({ 
       tooltip  : "{i18n>filter}", 
       src   : "sap-icon://filter", 
       hover  : function(oEvent){alert("Button" + oEvent.getSource().getId());}, 
      }); 

     this.byId("idChartContainer").addCustomIcon(oFilterIcon); 

Answer 1

這是我的分析：

1. 您的新懸停自定義控制圖標是正確的。如果你會獨立使用它，它會正常工作。
2. 但是，當您使用ChartContainer時，您的圖標轉換爲sap.m.OverflowToolbarButton時，您的自定義控件將不起作用。

我看着圖表容器中的源代碼，下面是代碼：

sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(i) { 
    var I = i; 
    var s = I.getTooltip(); 
    var b = new sap.m.OverflowToolbarButton({ 
     icon: I.getSrc(), 
     text: s, 
     tooltip: s, 
     type: sap.m.ButtonType.Transparent, 
     width: "3rem", 
     press: [{ 
      icon: I 
     }, this._onOverflowToolbarButtonPress.bind(this)] 
    }); 
    this._aCustomIcons.push(b); 
} 

所以，不使用你的圖標，但其性能被使用。由於這是標準代碼，因此不會傳遞自定義圖標的懸停代碼。

一種解決方案將是到的onmouseover添加到sap.m.OverflowToolbarButton：

sap.m.OverflowToolbarButton.prototype.onmouseover=function() { 
alert('hey') 

};

但是，這是危險的，因爲所有的OverflowToolbarButton按鈕開始使用這段代碼，我不會推薦它。

接下來的解決辦法是覆蓋私有方法：_addButtonToCustomIcons（再次不recommendred :(）

sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(icon) { 
      var oIcon = icon; 
      var sIconTooltip = oIcon.getTooltip(); 
      var oButton = new sap.m.OverflowToolbarButton({ 
       icon : oIcon.getSrc(), 
       text : sIconTooltip, 
       tooltip : sIconTooltip, 
       type : sap.m.ButtonType.Transparent, 
       width : "3rem", 
       press: [{icon: oIcon}, this._onOverflowToolbarButtonPress.bind(this)] 
      }); 
      this._aCustomIcons.push(oButton); 


      //oButton.onmouseover. 
      oButton.onmouseover = function() { 
       this.fireHover(); 
      }.bind(oIcon); 
     }; 

讓我知道這是否有助於ü:)