javascript - Angular ，鼠标悬停速度不稳定？

Question

我正在尝试创建一个“工具提示”，它跟随鼠标移动并在它离开它的位置时消失。但是，创建的工具提示很慢，它不能顺利地跟随我的鼠标，而且看起来很不稳定。我该如何解决？
https://stackblitz.com/edit/angular-851aej?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
技术支持:

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>

Answer 1

而不是使用 mouseover 和 mouseleave ， 利用:

mousenter 检测鼠标何时进入div .这是您显示工具提示的地方。

mousemove 检测鼠标何时在 div 内移动.这是您放置工具提示的位置。

mouseleave 检测鼠标何时离开div .这是您隐藏工具提示的地方。

此外:

不要在一个函数中多次执行相同的元素查询，而是执行一次查找并将其存储在一个变量中。可能，您甚至可以在组件初始化时只执行一次查找，但这取决于组件的进一步逻辑。

确保设置 pointer-events至none对于工具提示；如果没有，您将受到鼠标进入和离开工具提示的干扰。

将所有这些放在一起，您将获得以下代码:
组件:

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

模板:

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

样式表:

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

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

.show {
  opacity: 1 !important;
}

查看 StackBlitz