Question

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

我使用Angular的Renderer2收听特定区域的点击。之所以这样做，是因为我已经使用innerHTML生成了一些内容，并且（单击）不能应用于innerHTML。

单击效果很好，但是当我尝试在该区域中选择文本时，由于释放了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

要对同一区域上的某些“单击”类型采取不同的操作，您需要使用“ mouseDown”和“ mouseUp”，而不仅仅是“ click”。

使用“ mouseDown”时，按下鼠标按钮时将触发该事件，并且该事件将为您提供事件的坐标。释放按钮时会触发“ mouseUp”，这也为您提供了事件的坐标。

您现在有了第一个事件的坐标，例如5/5，而第二个事件的坐标是5/30。这意味着用户已将光标向一个方向移动了25个像素。按照您的说法，这不会被视为“点击”，因为光标移动了25个像素。

如果两个事件的坐标相同，例如5/5和5/5，则可以将其视为“单击”并执行更多代码。

您可以调整此设置，并让5/5到6/6的组合也作为“单击”通过，因为用户在每个方向上仅移动了1个像素，并且大多数情况下都不希望标记任何内容。

希望这对您有所帮助。如果您还有其他问题，请在此答案下留言：）

为什么Angular的renderer.listen（）取消选择文本？

1 个答案: