Is there a onselect event for non-form elements?

Question

Say I want to hide a span when the user highlights a bit of text containing that span, with the intention of copying that text on to his clipboard.

For example:

<p>The dragon <span class="tooltip">a large, mythical beast</span> belched
fire at St. George.</p>

I have found that in Firefox Mac, span.tooltip will disappear from view (in accordance with my CSS declarations) but will show up in the clipboard when it's copied there. I figured (wrongly?) that if I said "onHighlight, hide tooltip," maybe this wouldn't happen.

Answer 1

Though it may be more complicated, why not just have an onmousedown event on the <p> element, and thet event will then attach an onmousemove event and onmouseout event, so that if there is a mouse movement, while the button is down, then remove the class on the span elements, and once the user exits, the element then you can put them back.

It may be a bit tricky, and you may want to also look for key presses, or determine other times you want to know when to put back the css classes, but this would be one option, I believe.

Answer 2

It sounds like you need to go one step further and on highlight, remove the <span> and save a reference to it. Once the highlight is finished, re-insert the reference to the object.

 // copy start detected
 var savedTooltip = $('.tooltip').remove();

 // later that day when copy finished 
 $('p').append(savedTooltip);

If position of the <span> in your markup is important, you'd have to create a temporary reference element so you'd know where to re-insert it in the DOM.