Angular 15 触摸事件 - 当触摸在不同元素上开始时 touchend 不触发

Question

我正在我的帖子页面上构建一个类似 facebook 的反应系统。用户点击（不释放鼠标）点赞按钮，按钮上方出现一些反应，用户将鼠标悬停在他/她想要的反应上（仍然没有释放鼠标）然后如果他/她在反应上方释放鼠标将被注册，否则没有反应。

为此我有以下代码

<button class="btn text-sm btn-block text-{{getReactionTheme()}}" (mousedown)="toggleReactions = true" (touchstart)="toggleReactions = true" [class.text-primary]>
    <fa-icon style="margin-right: 0.125em;" [icon]="getReactionIcon()"></fa-icon> {{getReactionLabel()}}
</button>

<div class="reactions" [class.visible]="toggleReactions">
    <button *ngFor="let reaction of reactions" class="btn react-btn" [title]="reaction.label" (mouseup)="onReact($event, reaction.reaction)" (touchend)="onReact($event, reaction.reaction)">
        <img [src]="reaction.image">
    </button>
</div>

我还在文档中添加了一些监听器

    document.addEventListener('mouseup', ($event) => {if (this.toggleReactions) this.onReact($event, null)});
    document.addEventListener('touchend', ($event) => {if (this.toggleReactions) this.onReact($event, null)});

鼠标事件完美运行，我的问题是触摸屏。

touchstart

有效：反应出现但是当我将手指拖到反应按钮上并释放时

touchend

没有被调用。当我尝试在第一个赞按钮上听

touchend

时，它起作用了。

就像

touchend

只在触发

touchstart

的同一个元素上触发

顺便说一句，我有

:hover

css 选择器来放大 react-btn 并且很乐意帮助我找到触摸屏等效选择器（我试过 :active & :focus 甚至改变但没有结果）