SVG元素分层与事件冲突：实现子元素可点击同时父元素悬停事件生效

以下方案可同时满足你的两项需求，代码改动最小：

你可以通过主动转发黄色矩形的鼠标悬停事件实现需求，由于mouseenter事件本身不支持冒泡，直接在黄色矩形的事件绑定中同步灰色矩形的悬停逻辑即可，不需要修改原有SVG元素层级和视觉效果：

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  
<svg xmlns="http://www.w3.org/2000/svg" height="400px" width="400px">
  <rect x="30" y="30" width="100" height="100" fill="grey" (mouseenter)="txtg='in grey'" (mouseleave)="txtg=''" />
  <rect x="70" y="70" width="50" height="50" fill="yellow"  
      (click)="txty='yellow clicked'" 
      (mouseleave)="txty=''"
      <!-- 新增以下两行事件绑定，同步灰色块悬停状态 -->
      (mouseenter)="txtg='in grey'"
      (mouseleave)="txtg=''"
      pointer-events="all"/>
</svg>
<p>
txtg: {{txtg}}<br/>
txty: {{txty}}
  
  `,
})
export class AppComponent {
  txtg: string = '';
  txty: string = '';
}

如果后续灰色矩形的悬停逻辑有迭代，你也可以将逻辑封装为公共方法，在灰色和黄色的对应事件中统一调用即可，不需要重复维护逻辑。

内容的提问来源于stack exchange，提问作者chris01