Javascript Angular ，鼠标悬停速度不稳定

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

• 100以检测鼠标何时进入div.这是显示工具提示的位置.
• 100以检测鼠标何时在div内移动.这是放置工具提示的位置.
• 100以检测鼠标何时离开div.这是隐藏工具提示的位置.

此外:

• 不要在一个函数中多次执行同一元素查询，而是执行一次查找并将其存储在变量中.您甚至可以在组件初始化时只执行一次查找，但这取决于组件的进一步逻辑.
• 确保工具提示设置为pointer-events到none；如果没有，鼠标进入和离开工具提示时会产生干扰.

将所有这些放在一起，可以得到以下代码:

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

Template:

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

Stylesheet:

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

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

.show {
  opacity: 1 !important;
}

查看StackBlitz