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

Question

(Context: I am making an email processor which shows an email on a web page)

I use Angular's Renderer2 for listening to clicks in a certain area. I do this because I have generated some content with innerHTML and (click) can not be applied to innerHTML.

The clicks get catched fine but when I try to select text inside this area, the text gets de-selected when I release my mousebutton, this is because of the renderer.listen().

Why does this happen and how can I fix this?

@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);
      }
    });
  }

Edit: The problem is not caused by the showBox() method, it is solely caused by the renderer. When I am using the renderer without any methods, the problem still occurs. The listener fires on clicks, this means clicks on text as well.

I cannot prevent this by limiting the listening area to only the images since I do not know where the images will be placed.

Answer 1

For acting different on certain "click" types on the same area, you need to use "mouseDown" and "mouseUp" instead of just "click".

When you are using "mouseDown", the event fires when the mousebutton is pressed down and the event gives you the coordinates of the event. "mouseUp" fires when you release the button and this also gives you the coordinates of the event.

You now have coordinates, for example 5/5, from the first event and 5/30 from the 2nd event. This means that the user has moved the cursor 25 pixels in one direction. This would not be consideres a "click" in your terms because the cursor moved 25 pixels.

If coordinates from both events are the same, like 5/5 and 5/5, then you can consider this a "click" and do execute further code.

You can adjust this and let a combination of 5/5 to 6/6 also pass as "clicked" because the user only moved 1 pixel in each direction and mostly didnt wanted to mark something.

I hope this helps you. If you have furzer questions, just comment under this answer :)