Angular 鼠标悬停鼠标在同一个元素上释放并单击方法

我有一个要求，我必须在鼠标悬停上显示表格适用字体的预览，在鼠标悬停上设置默认字体，并在单击上应用字体。因此，我调用了HTML元素上的方法，如下所示：

<a (click)="function('font')" (mouseover)="function('font')" (mouseout)="function('default')"><span  class="submenu-span">Regular 10</span></a>

但单击时不会调用该函数。每次我单击元素时，mouseleave方法都会覆盖我的单击功能。 我做错了什么？

---

提前感谢

。停止即时复制

将解决您的问题

请遵循以下内容了解更多信息-

停止即时传播演示
分区，
P
a{
填充：15px 30px；
显示：块；
边框：2倍实心#000；
https://stackoverflow.com/review/first-posts/25917156#
背景：#fff；
}
DIV
p

函数sayHi（）{
警觉（“你好！”；
事件。stopImmediatePropagation（）；
}
函数sayHello（）{
警报（“你好，世界！”）；
}
//将多个事件处理程序附加到超链接
var link=document.getElementById（“链接”）；
link.addEventListener（“点击”，sayHi）；
link.addEventListener（“单击”，说你好）；

创建两个类：

次要类：这是一个临时类，可以在mouseover和mouseout上添加和删除。在将字体添加到html视图之前，还要将其添加到类中

主/主类：这是主类，将用于所有or表。单击将修改此类并替换字体样式

---

确保次要类规则覆盖主要类。

您可以为每个事件编写单独的方法吗。我认为这也会更容易测试。如果没有，您能否创建一个Stackblitz示例？

function(font) {
    switch (font) {
        case 'xxx': {
            this.selectedFont.emit('size');
            break;
        }
        case 'yyy': {
            this.selectedFont.emit('size');
            break;
        }
        case 'default': {
            this.selectedFont.emit('size')
            break;
        }
    }
}