mouseenter / mouseleave 与@HostListener

Question

闪烁快要死了，在阅读了所有 jQuery 相关线程和 mdn 之后，我仍然无法弄明白。

所以我有这个用于显示工具提示的@Directive，这就是我将它绑定到元素的方式：

  @HostListener('mouseenter', ['$event']) onEnter( e: MouseEvent ) {
    this.showTooltip(e);
  }

  @HostListener('mouseleave', ['$event']) onLeave( e: MouseEvent ) {
    this.hideTooltip(e);
  }

  @HostListener('click', ['$event']) onClick( e: MouseEvent ) {
    this.hideTooltip(e);
  }

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private coordsService: CoordsService,
    @Inject(DOCUMENT) doc
  ) {
    this.docBody = doc.body;
  }

  public ngAfterViewInit(): void {
    this.tooltipContainer = this.renderer.createElement('div');
    this.renderer.addClass( this.tooltipContainer, 'tooltip--tip');
    this.renderer.addClass( this.tooltipContainer, 'tooltip--pos_' + this.position);
  }

  public showTooltip( e: MouseEvent ): void {

    if ( this.tooltip !== null ) {

      // text 
      this.selectedTooltip = this.renderer.createText( this.tooltip );

      // append to body
      this.renderer.appendChild( this.tooltipContainer, this.selectedTooltip);
      this.renderer.appendChild( this.docBody, this.tooltipContainer );

      // target element
      const target: HTMLElement = <HTMLElement>e.target;
      const bbox: ClientRect = target.getBoundingClientRect();

      // the array holds the pixel position of the property; should sync with top:left
      let coords: ElementCoords = this.coordsService.setPositionCoords(bbox, this.position, this.tooltipContainer, { left: -6 } );

      // write position
      this.renderer.setStyle( this.tooltipContainer, 'top', coords.top+'px' );
      this.renderer.setStyle( this.tooltipContainer, 'left', coords.left+'px' );
    }

  }

  public hideTooltip( e: MouseEvent ): void {
    if ( this.selectedTooltip ) {
      this.renderer.removeChild ( this.tooltipContainer, this.selectedTooltip);
      this.renderer.removeChild( this.docBody, this.tooltipContainer );
      this.selectedTooltip = null;
    }
  }

每个 <span> 中包含文本的内容都会闪烁。每个包含 SVG 的选择器都会闪烁...有什么想法吗？

PS。不知何故 el: ElementRef 没有被使用，尽管我出于某种原因注入了它。尝试匹配对它的引用 - 仍然没有成功。

Answer 1

您的 tooltipContainer 正在触发 mouseleave，因为它位于元素上方。如果您不介意，您不能 click/select 那里的任何东西。在您的 css 中将 pointer-events: none 设置为 tooltipContainer。

您使用指令 (mouseenter) 输入元素，工具提示容器将越过该元素。现在工具提示上有光标。啊哈！这会触发带有指令的元素的 (mouseleave)，因此工具提示消失。但是，嘿，不是指令再次有光标......（mouseenter）！......但是嘿！工具提示再次位于光标下...（鼠标离开）...等等 :)

使用指针事件，您可以确保覆盖元素不会收到任何事件，并且这些事件会触发到其下方的元素。但是，您也可以尝试使工具提示不与元素重叠，但这取决于您

mouseenter / mouseleave 与@HostListener

mouseenter / mouseleave with @HostListener

angular

typescript

mouseevent

angular2-directives

angular2-hostbinding