Mouseover mouseleave 和 Click 方法在相同的元素角度答案

【问题标题】：Mouseover mouseleave and Click method on same element angularMouseover mouseleave 和 Click 方法在相同的元素角度
【发布时间】：2020-04-21 09:01:18
【问题描述】：

我有一个要求，我必须在 mouseover 上显示表格的适用字体预览，在 mouseleave 上设置默认字体并在 上应用字体点击。所以我在 HTML 元素上调用了如下方法：

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

功能如下：

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;
        }
    }
}

但点击时未调用该函数。每次我点击元素时，mouseleave 方法都会覆盖我的点击功能。我究竟做错了什么？提前致谢

【问题讨论】：

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

标签： angular typescript click mouseover mouseleave

【解决方案1】：

.stopImmediatePropagation 会解决你的问题。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Stop Immediate Propagation Demo</title>
  <style type="text/css">
    div,
    p,
    a {
      padding: 15px 30px;
      display: block;
      border: 2px solid #000;
      https: //stackoverflow.com/review/first-posts/25917156#
      background: #fff;
    }
  </style>
</head>

<body>
  <div onclick="alert('You clicked: ' + this.tagName)">DIV
    <p onclick="alert('You clicked: ' + this.tagName)">P
      <a href="#" id="link">A</a>
    </p>
  </div>

  <script>
    function sayHi() {
      alert("Hi, there!");
      event.stopImmediatePropagation();
    }

    function sayHello() {
      alert("Hello World!");
    }

    // Attaching multiple event handlers to hyperlink
    var link = document.getElementById("link");
    link.addEventListener("click", sayHi);
    link.addEventListener("click", sayHello);
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

创建两个类：

Secondary class：这是一个临时类，您可以在 mouseover 和 mouseout 时添加和删除它。在将字体添加到 html 视图之前，还要将字体添加到类中。
Main/Primary 类：这是主要类，将用于您的所有或表。点击会修改这个类并替换字体样式。

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

【讨论】：