Preventing text highlight from disappearing on click
Hey all, I am running into an issue that I hope can be solved in a reasonable manner.
I created a popup tooltip in JavaScript which is displayed when text on a page is highlighted. The problem I am having is that when the tooltip is clicked, the highlight disappears which I want to prevent. Things I have tried (and failed):
- Saving the selection with document.getSelection()
- Using Event.stopPropogation() in the tooltip to stop the click from propogating
- Using an iframe for the tooltip (this worked but I couldn't successfully add child elements to the iframe in Firefox)
I want to know if there is either a better way to solve my problem, or learn how to create and modify iframes properly in Firefox (I believe the restricted security settings prevent it from working).
I almost got the iframes to work in Firefox by using document.write() but the canvas didn't render. I also believe that using iframes is a bad way to solve this issue as they are meant to show foreign web content which I do not want to do. I would appreciate any suggestions.
Posted Apr 14, 2016, 11:11 PM UTC
event.preventDefault() on the tooltip.
I should have noted that I tried that as well. What I am suspecting is that the highlight disappearing is not something I have control of with preventDefault or stopPropogation.
it's a mousedown event you need to prevent.
<html> <head> <style type="text/css"> .box { display: inline-block; width: 100px; height: 100px; background: black; } </style> </head> <body> <p>Hello World. Select this text. click the two boxes. the right one doesn't deselect.</p> <div class="box"></div> <div id="target" class="box" onmousedown="event.preventDefault()"></div> </body> </html>Awesome, thanks a bunch. I don't know why that was so hard to wrap my head around.