Sapui5 仅将addEventDelegate限制为父hbox

这是为上一个问题创建的自定义控件

我有两个

span

元素相邻。它们位于

格式化文本中。
FormattedText
本身位于
HBox
中。
我希望在用户将鼠标从
hbox
上滑过/移出时触发popover。不幸的是，由于我有两个跨距，当用户悬停在它们上方时，这会分别触发（因此显示两个单独的弹出窗口，而实际上它应该是一个）。我的假设是，这是因为
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>');
    }
  });
});

sap.ui.define([
“sap/ui/core/Control”，
“sap/m/FormattedText”，
“sap/m/HBox”，
]，函数（控件，格式化文本，HBox）{
返回Control.extend（'drex.Control.TherapyCosts'{
元数据：{
特性：{
排名：{
键入：“int”，
默认值：0
},
},
聚合：{
_RankedTheraphyCost:{type:'sap.m.FormattedText'，多个：false，singularName:'\u RankedTheraphyCost'}，
_popover:{type:'sap.m.popover'，multiple:false，singularName:'u popover'}，
_hbox:{type:'sap.m.hbox'，multiple:false}
}
},
init：函数（）{
Control.prototype.init.apply（这是参数）；
},
onBeforeRendering:函数（）{
const highlighedCurrency=this.getCurrency（）.repeat（this.getRank（））；
const fadedCurrency=this.getCurrency（）.repeat（7-this.getRank（））；
const_popover=新sap.m.popover({
showHeader:false，
位置：'VerticalPreferredBottom'，
内容：新的sap.m.Text（{Text:'test'}）
});
此.setAggregation（“\u popover”，\u popover）；
const\u formattedText=新格式化的文本({
htmlText：
`${highlighedCurrency}`+
`${fadedCurrency}`
});
此.setAggregation（“RankedTheraphyCost”，格式化文本）；
const_hbox=新的hbox(
{items:[this.getAggregation（''u rankedttherapycost'）]}
.addEventDelegate({
onmouseover:（）=>{
this.getAggregation（“'u popover'）.openBy（this）；
},
onmouseout:（）=>{
这个.getAggregation（“'u popover'）.close（）
}
});
此.setAggregation（“\u hbox”，\u hbox）
},
渲染器：函数（rm、oControl）{
const_hbox=oControl.getAggregation（“u hbox”）；
rm.write（“”）；
rm.renderControl（_hbox）；
rm.write（“”）；
}
});
});

这是这个问题的视频

---

我想你可以不用hbox；只要有两个格式化文本或任何sapui5控件就可以了

sap.ui.define([
“sap/ui/core/Control”，
“sap/m/FormattedText”，
]，函数（控件，格式化文本）{
Control.extend（'TherapyCosts'{
元数据：{
特性：{
排名：{
键入：“int”，
默认值：0
},
货币：{
键入：“字符串”，
默认值：“$”
}
},
聚合：{
_突出显示：{type:'sap.m.FormattedText'，multiple:false}，
_褪色：{type:'sap.m.FormattedText'，multiple:false}，
_popover:{type:'sap.m.popover'，多个：false，名称：''u popover'}
}
},
init：函数（）{
Control.prototype.init.apply（这是参数）；
this.addStyleClass（'therapy-cost'））
},
onBeforeRendering:函数（）{
const highlighedCurrency=this.getCurrency（）.repeat（this.getRank（））；
const highlight=新格式化文本({
htmlText:HighLighHedCurrency
});
此.setAggregation（“突出显示”，突出显示）；
const fadedCurrency=this.getCurrency（）.repeat（7-this.getRank（））；
常量褪色=新格式化文本({
htmlText:fadedCurrency
});
这个集合（“褪色的”，褪色的）；
const_popover=新sap.m.popover({
showHeader:false，
位置：'VerticalPreferredBottom'，
内容：新的sap.m.Text（{Text:'test'}）
});
此.setAggregation（“\u popover”，\u popover）；
},
渲染器：函数（rm、oControl）{
rm.write（“”）；
rm.renderControl（oControl.getAggregation（“突出显示”）；
rm.renderControl（oControl.getAggregation（“淡入淡出”）；
rm.write（“”）；
},
onAfterRendering:函数（）{
const popOver=this.getAggregation（“u popOver”）；
const highlighted=this.getAggregation（“_highlighted”）；
突出显示。$（）.addClass（“突出显示的货币”）；
突出显示。$（）。悬停（函数（）{
popOver.openBy（突出显示）；
}，函数（）{
popOver.close（）；
});
const failed=this.getAggregation（“_failed”）；
褪色。$（）.addClass（“货币褪色”）；
},
});
（新疗法）({
排名：5
})).placeAt（“内容”）
});

---

此处的关键是鼠标移出正在侦听事件的元素的任何子元素时，将触发mouseout事件。例如，在这种情况下，从强调文本移动到淡出文本时，当移离强调文本时，会出现一个mouseout事件，关闭弹出窗口，然后在淡出文本上出现mouseover事件，再次打开弹出窗口

因为打开一个已经打开的弹出窗口不会做任何事情，所以只需要在mouseout上添加一行来检查所访问的元素。如果它不是当前元素的子元素，则只关闭popover

如果（！this.getDomRef（）包含（e.toElement））{
popOver.close（）
}

基于D.Seah的回答，我将此添加到JSBin中。我个人不喜欢像这样使用

onbeforeredering

和

onAfterRendering

，所以我对init进行了一些重构，以构建init上的所有内容，并简单地更改属性更改控件。这样，出于性能原因，您在渲染方面做得更少

sap.ui.define([
“sap/ui/core/Control”，
“sap/m/FormattedText”，
]，功能（控制）