javascript - Angular, viteza la mouseover este sacadată?

Încerc să creez un „tooltip” care să urmeze mouse-ul și să dispară atunci când părăsește locația sa. Cu toate acestea, tooltip-ul creat este lent, nu urmează mouse-ul în mod fluid și pare sacadat. Cum pot să remediez această problemă?

https://stackblitz.com/edit/angular-851aej?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

TS:

export class AppComponent {
  name = 'Angular';

  constructor(private el: ElementRef) {}

  first(e: { pageX: any; pageY: any }) {
    console.log(e.pageX, e.pageY);

    this.el.nativeElement.querySelector('#first').style.left =
      e.pageX.toString() + 'px';
    this.el.nativeElement.querySelector('#first').style.top =
      e.pageY.toString() + 'px';
    this.el.nativeElement.querySelector('#first').classList.add('show');
  }

  second(e: { pageX: any; pageY: any }) {
    this.el.nativeElement.querySelector('#first').style.left = '0px';
    this.el.nativeElement.querySelector('#first').style.top = '0px';

    this.el.nativeElement.querySelector('#first').classList.remove('show');
  }
}

HTML:

<div (mouseover)="first($event)" (mouseleave)="second($event)"class="place-welcome">
<h2>This is a Panel</h2>
<p>Hello my darling</p>
</div>

<div id="first">asdasdasdasd</div>

Răspuns #1

În loc să folosiți mouseover și mouseleave, folosiți:

• mousenter pentru a detecta când mouse-ul intră în div. Aici este locul unde afișați tooltip-ul.
• mousemove pentru a detecta când mouse-ul este mutat în interiorul div-ului. Aici poziționezi tooltip-ul.
• mouseleave pentru a detecta când mouse-ul părăsește div. Aici este momentul în care ascunzi tooltip-ul.

În plus:

• Nu efectua aceeași interogare de element de mai multe ori într-o singură funcție, ci efectuează căutarea o dată și stochează-o într-o variabilă. Posibil, poți chiar să faci căutarea o singură dată la inițializarea componentei, dar asta depinde de logica ulterioară a componentei tale.
• Asigurați-vă că setați pointer-events la none pentru tooltip; altfel, veți avea interferențe de la intrarea și ieșirea mouse-ului din tooltip.

Punând toate acestea împreună, obții următorul cod:

Component:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';

  constructor(private el: ElementRef) {}

  get tooltip() {
    return this.el.nativeElement.querySelector('#first');
  }

  enter() {
    this.tooltip.classList.add('show');
  }

  move(e: { pageX: number; pageY: number }) {
    const tooltipStyle = this.tooltip.style;
    tooltipStyle.left = e.pageX + 'px';
    tooltipStyle.top = e.pageY + 'px';
  }

  leave() {
    this.tooltip.classList.remove('show');
  }
}

Șablon:

<div
  (mouseenter)="enter()"
  (mousemove)="move($event)"
  (mouseleave)="leave()"
  class="place-welcome"
>
  <h2>This is a Panel</h2>
  <p>Hello my darling</p>
</div>

<div id="first">asdasdasdasd</div>

Foaie de stil:

#first {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.place-welcome {
  width: 100%;
  height: 300px;
  background: red;
}

.show {
  opacity: 1 !important;
}

Vezi pe StackBlitz

Răspunsul #2

Mouseover poate fi un eveniment care se declanșează de multe ori într-o câteva secunde, de exemplu cursorul se mișcă cu 1px în timp ce rămâne peste același element html.

Având în vedere că...

• încearcă să eviți să apelezi întotdeauna console.log (include un fel de condiție)
• în loc să apelezi această metodă de fiecare dată this.el.nativeElement.querySelector('#first'), atribuie-o unei variabile și reutilizeaz-o

let first = this.el.nativeElement.querySelector('#first') ;
first.left = e.pageX.toString() + 'px';
first.style.top = e.pageY.toString() + 'px';
first.classList.add('show');

nu doar că face codul tău mai ușor de citit, ci evită să interoghezi de mai multe ori pentru a obține același rezultat la fiecare apel la onmouseover