仅将addEventDelegate限制到父hbox

Question

这是为我之前的问题Custom font for currency signs创建的自定义控件>

我有两个span元素彼此相邻。他们坐在FormattedText中。 FormattedText本身位于HBox中。我希望用户从hbox上移/移开时弹出弹出窗口。不幸的是，由于我有2个跨度，当用户将鼠标悬停在它们上时会分别触发（因此显示2个单独的弹出窗口，而实际上应该是一个）。我的假设是，这是因为onmouseover/out连在引擎盖下的两个跨度上。我可以将这些事件限制为仅hbox吗？

sap.ui.define([
  'sap/ui/core/Control',
  'sap/m/FormattedText',
  'sap/m/HBox',
], function (Control, FormattedText, HBox) {

  return Control.extend('drex.control.TherapyCosts', {
    metadata: {
      properties: {
        rank: {
          type: 'int',
          defaultValue: 0
        },
      },
      aggregations: {
        _rankedTherapyCost: {type: 'sap.m.FormattedText', multiple: false, singularName: '_rankedTherapyCost'},
        _popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'},
        _hbox: {type: 'sap.m.HBox', multiple: false}
      }
    },

    init: function () {
      Control.prototype.init.apply(this, arguments);
    },

    onBeforeRendering: function () {
      const highlighedCurrency = this.getCurrency().repeat(this.getRank());
      const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
      const _popover = new sap.m.Popover({
        showHeader: false,
        placement: 'VerticalPreferredBottom',
        content: new sap.m.Text({text: 'test'})
      });
      this.setAggregation('_popover', _popover);
      const _formattedText = new FormattedText({
        htmlText:
          `<span class="currencyHighlighted">${highlighedCurrency}</span>` +
          `<span class="currencyFaded">${fadedCurrency}</span>`
      });
      this.setAggregation('_rankedTherapyCost', _formattedText);
      const _hbox = new HBox(
        { items: [this.getAggregation('_rankedTherapyCost')]})
        .addEventDelegate({
          onmouseover: () => {
            this.getAggregation('_popover').openBy(this);
          },
          onmouseout: () => {
            this.getAggregation('_popover').close()
          }
        });
      this.setAggregation('_hbox', _hbox)
    },

    renderer: function (rm, oControl) {
      const _hbox = oControl.getAggregation('_hbox');
      rm.write('<div');
      rm.writeControlData(oControl);
      rm.write('>');
      rm.renderControl(_hbox);
      rm.write('</div>');
    }
  });
});
这里是问题的视频https://streamable.com/fjw408

这是为上一个问题创建的自定义控件，用于货币符号的自定义字体我有两个彼此相邻的span元素。它们位于FormattedText中。 FormattedText本身...

Answer 1

我认为您可以不用hbox；仅使用两个格式化的文本或任何sapui5控件也可以。

Answer 2

这里的关键是当鼠标移出正在侦听该事件的元素的任何子元素时，将触发mouseout事件。例如，在这种情况下，从强调文本移到淡入淡出的文本时，当您移开强调文本时会出现mouseout事件，这会关闭弹出窗口，然后在淡入淡出的文本上发生鼠标悬停事件，然后再次将其打开。