Почему Anglere renderer.listen () отменяет выделение текста?

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" вместо простого "щелчка".

Когда вы используете "mouseDown", событие срабатывает, когда кнопка мыши нажата, и событие дает вам координаты события. «mouseUp» срабатывает, когда вы отпускаете кнопку, и это также дает вам координаты события.

Теперь у вас есть координаты, например, 5/5 от первого события и 5/30 от второго события. Это означает, что пользователь переместил курсор на 25 пикселей в одном направлении. Это не будет считаться «щелчком» в ваших терминах, потому что курсор переместился на 25 пикселей.

Если координаты обоих событий одинаковы, например 5/5 и 5/5, то вы можете считать это «щелчком» и выполнить дополнительный код.

Вы можете отрегулировать это и позволить комбинации от 5/5 до 6/6 также пройти как «нажал», потому что пользователь перемещал только 1 пиксель в каждом направлении и в основном не хотел что-то отмечать.

Надеюсь, это поможет вам. Если у вас есть вопросы о фурзере, просто прокомментируйте этот ответ:)