Наведите курсор мыши на метод мышки и клик на одном элементе angular - PullRequest
Новая
       65

Наведите курсор мыши на метод мышки и клик на одном элементе angular

0 голосов
/ 21 апреля 2020

У меня есть требование, где я должен показать предварительный просмотр применимого шрифта для таблицы на при наведении мыши , установить шрифт по умолчанию на 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 переопределяет мою функциональность щелчка. Что я делаю неправильно? заранее спасибо

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Создайте два класса:

  1. Вторичный класс: это временный класс, который вы можете добавлять и удалять при наведении курсора и наведении мыши. Также добавьте шрифт в класс, прежде чем добавлять его в представление html.
  2. Основной / Основной класс: Это основной класс, который будет использоваться на всех ваших таблицах. Клик изменит этот класс и заменит стиль шрифта.

Убедитесь, что правило вторичного класса перезаписывает основной класс.

0 голосов
/ 21 апреля 2020

.stopImmediatePropagation решит вашу проблему.

Следуйте этому, чтобы узнать больше - https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php

<!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>
...