为什么 Angular 的 renderer.listen() 去 select 文本？

Question

（上下文：我正在制作一个在网页上显示电子邮件的电子邮件处理器）

我使用Angular的Renderer2来监听某个区域的点击。我这样做是因为我已经使用 innerHTML 生成了一些内容并且（单击）不能应用于 innerHTML。

点击可以很好地捕捉到，但是当我尝试在此区域内输入 select 文本时，当我释放鼠标按钮时，文本被取消 selected，这是因为 renderer.listen().

为什么会发生这种情况，我该如何解决？

@ViewChild('listener') listener;
...

  ngAfterViewInit() {
    this.renderer.listen(this.listener.nativeElement, 'click', (evt) => {
      if (evt.path[0].id.includes('plus')) {
        this.lightboxService.showBox(evt.path[0].src);
      }
    });
  }

编辑：问题不是由 showBox() 方法引起的，它完全是由渲染器引起的。当我在没有任何方法的情况下使用渲染器时，问题仍然存在。侦听器在点击时触发，这意味着点击文本也是如此。

我无法通过将收听区域仅限于图像来防止这种情况发生，因为我不知道图像将放置在哪里。

Answer 1

为了在同一区域对某些 "click" 类型进行不同的操作，您需要使用 "mouseDown" 和 "mouseUp" 而不仅仅是 "click".

当您使用 "mouseDown" 时，按下鼠标按钮时会触发事件，并且会为您提供事件的坐标。 "mouseUp" 在您松开按钮时触发，这也会为您提供事件的坐标。

您现在有了第一个事件的坐标，例如 5/5 和第二个事件的 5/30。这意味着用户已将光标沿一个方向移动了 25 个像素。这在您的术语中不会被视为 "click"，因为光标移动了 25 个像素。

如果两个事件的坐标相同，例如 5/5 和 5/5，那么您可以将其视为 "click" 并执行进一步的代码。

您可以对此进行调整，让 5/5 到 6/6 的组合也作为 "clicked" 通过，因为用户在每个方向上只移动了 1 个像素，而且大多不想做标记。

希望对您有所帮助。如果您有毛皮问题，请在此答案下发表评论:)

为什么 Angular 的 renderer.listen() 去 select 文本？

Why does Angular's renderer.listen() de-select the text?

angular

typescript

angular6

renderer