使用悬停事件或鼠标悬停扩展 sap.ui.core.Icon

Question

我扩展了 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());});

拜托，您知道为什么不为 sap.ui.core.Icon 调用事件处理程序 onmouseover 吗？或者你能提出一些其他的解决方案吗？

以下是我向 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

这是我的分析：

您的新自定义悬停控件图标是正确的。如果您将独立使用它，它将正常工作。
但是，当您使用 ChartContainer 时，您的自定义控件将无法工作，因为您的图标会转换为 sap.m.OverflowToolbarButton。

我查看了Chart Container的源代码，下面是代码：

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 按钮都开始使用此代码，我不会推荐它。

下一个解决方案是覆盖私有 method:_addButtonToCustomIcons（同样不推荐：( )

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

如果这对您有帮助，请告诉我。 :)

使用悬停事件或鼠标悬停扩展 sap.ui.core.Icon

Extending sap.ui.core.Icon with hover event or mouseover

hover

jquery-hover

sapui5