与悬停事件或鼠标悬停

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); 
     }; 

让我知道这是否有助于ü:)