Question

我有svg项，当用户单击或悬停它们时会突出显示它们的相应路径。

我正在使用指令来检测onEnter onLeave和Click事件。

当我将鼠标悬停（我突出显示）然后离开元素（我播放）时，它工作正常

然后，当我也单击该路径时，该路径将突出显示（

实际上是当我在其他地方单击“突出显示”时发生的情况。

我无法做到的是，当我单击屏幕的其余部分时，我希望高亮显示消失。

这是我的指令逻辑

export class HighlightDirective {
  constructor(private renderer:Renderer2 , private el: ElementRef) {}
  clicked=false
  @HostListener('mouseenter') onMouseEnter() {
    this.changeOpacity(1);
  }

  @HostListener('mouseleave') onMouseLeave() {
    if (!this.clicked) {
      this.changeOpacity(0);
    }
  }
  @HostListener('click') click() {
    this.changeOpacity(1);
    this.clicked = true;
  }
  changeOpacity(opacity: number) {
    this.renderer.setStyle(this.el.nativeElement.nextSibling, 'opacity', opacity);
  }

}

这是带有Highlight属性标签的SVG的一部分

 <g id="b1" transform="translate(-885 -562)">
    <g id="b1select">
      <ellipse id="Ellipse_1" data-name="Ellipse 1" cx="5.3" cy="5.3" rx="5.3" ry="5.3" transform="translate(1309.17 932.12)" fill="none" stroke="#b18802" stroke-width="1"/>
      <text id="B1-2" data-name="B1" transform="translate(1310.67 939.62)" fill="#b18802" font-size="6" font-family="ArialMT, Arial"><tspan x="0" y="0">B1</tspan></text>
    </g>
    <rect appHighlight (click)="openDialog($event)" id="container" width="12" height="11" transform="translate(1308.67 931.62)" fill="rgba(255,255,255,0)"/>
    <path id="b1-3" data-name="b1" d="M1093.763,1595.658v-82.417s5-14.987-18.452-16.644-40.9,2.386-54.093-11.537-132.873-159.193-132.873-159.193-6.456-10.249-24.986-14.661-9.858-17.907-4.728-25.235,39.039-47.23,39.039-47.23" transform="translate(208.67 -656.38)" fill="none" stroke="#efcf2f" stroke-linecap="round" stroke-width="2"/>
  </g>

以下是stackBlitz

上的示例

Answer 1

document.removeEventListener('mousedown', this.scroll);

我使用的是每当mousedown事件触发removeListner时都会删除滚动事件。我们在使用addEventListner（）之前添加了它。 this.scroll是您定义的事件，可以执行您想做的事情。

在Angular中的指令属性元素外部单击时，将样式应用于元素

1 个答案: