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

Posted 2023-05-09

【中文标题】使用悬停事件或鼠标悬停扩展 sap.ui.core.Icon

【英文标题】：Extending sap.ui.core.Icon with hover event or mouseover

【发布时间】：2017-05-14 15:07:56

【问题描述】：

我用悬停事件处理扩展了 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);   

【问题讨论】：

您的控件在您的代码示例中被命名为abc.reuseController.HoverIcon，但您将sap.ui.core.HoverIcon 添加到您的ChartContainer。错字？

谢谢，我打错了，在***中，在代码中是正确的。

【参考方案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);

所以，你的 Icon 没有被使用，但它的属性被使用了。由于这是标准代码，因此不会传递您的自定义图标悬停代码。

一种解决方案是将鼠标悬停添加到 sap.m.OverflowToolbarButton ：

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

;

但是，这很危险，因为所有的 OverflowToolbarButton 按钮都开始使用此代码，我不会推荐它。

下一个解决方案是覆盖私有方法：_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 库。但至少我知道问题出在哪里，所以我不会在 ChartContainer 中使用 Icon 并寻找其他方法。

这是另一种方法***.com/questions/41464115/…，但有其他东西阻止了我。