javascript - Angular, museover-hastigheten hakker?

Jeg prøver å lage et «verktøytips» som følger musen rundt og forsvinner når den forlater sin posisjon. Imidlertid er verktøytipset som blir laget tregt, det følger ikke musen min jevnt og virker hakkete. Hvordan kan jeg fikse dette?

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>

Svar #1

I stedet for å bruke mouseover og mouseleave, bruk:

  • mousenter for å oppdage når musen går inn i div. Dette er hvor du viser verktøytipset.
  • mousemove for å oppdage når musen beveges inne i div. Dette er hvor du plasserer verktøytipset.
  • mouseleave for å oppdage når musen forlater div. Dette er når du skjuler verktøytipset.

I tillegg:

  • Ikke utfør den samme elementforespørselen flere ganger i en funksjon, men utfør oppslaget én gang og lagre det i en variabel. Muligens kan du til og med utføre oppslaget bare én gang ved komponentinitialisering, men det avhenger av den videre logikken i komponenten din.
  • Pass på å sette pointer-events til none for verktøytipset; hvis ikke, vil du få forstyrrelser når musen går inn og ut av verktøytipset.

Når du setter alt dette sammen, får du følgende kode:

Komponent:

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

Mal:

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

Stilark:

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

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

.show {
  opacity: 1 !important;
}

Se på StackBlitz

Svar #2

Mouseover kan være en hendelse som utløses mange ganger på noen sekunder, for eksempel når markøren beveger seg 1 px mens den fortsatt er over det samme HTML-elementet.

Med tanke på at...

  • prøv å unngå å alltid kalle console.log (inkluder en eller annen form for betingelse)
  • i stedet for å kalle denne metoden hver gang this.el.nativeElement.querySelector('#first'), tildel den til en variabel og bruk den på nytt
let first = this.el.nativeElement.querySelector('#first') ;
first.left = e.pageX.toString() + 'px';
first.style.top = e.pageY.toString() + 'px';
first.classList.add('show');

ikke bare gjør det koden din mer lesbar, det unngår også at du spør på nytt for å få samme resultat ved hver gang du kaller på onmouseover

Relaterte artikler