Prevent mouse event from selecting text

I am collecting mouse events on a webpage, namely onclick. When I click in two different places, my code does something in those two places. But after the second click (with event.shiftKey = true), I also find that the page content between these two locations is selected as if I had done a click drag between the start and end points.

I looked at a couple of questions [1] and [2] regarding invalid text to be selected, but both of these answers are CSS related, which is unacceptable for this situation, because the elements involved are arbitrary and of different sizes, and because I don't want to disable showing the selection (I want to show if there is one!), I want to disable it from actually getting the selection at a certain time. Thus, eliminating any choice that might be "accidental" is also out of the question, as it will save you from any previous valid choice.

I thought the event somehow propagates into native code where it makes the selection, so I tried:

event.cancelBubble = true
event.preventDefault()
return false

      

        
        
        
      

    

But it didn't work. I've only tested this with Chrome, but it's best to use cross browser.

Update: I created one script to demonstrate the problem . Click on any line of text in the output. Then slide + click on any other line. Both lines will be applied in the CSS, but there is also a cyan-blue browser selection that I'm trying to prevent.

Update 2: I vote to close because this is pointed out by @ivy_lynx, it is indeed a duplicate and the answer to this related question solves the problem.