views:

276

answers:

6

Highlight some text on this webpage, then click basically anywhere on the document. Your selection will disappear.

Is there a way to prevent this behavior when the user clicks on a specific element, either by CSS or Javascript?

E.g.:

var element = document.getElementById("foo");
foo.onclick = function(e){
   //some magic here that prevents deselection from occuring
}

or

foo.style.preventDeselect = "true";

Edit: Perhaps I could store the selection, then after "mouseclick" restore the selection? Is there a way to store aselection, and then reselect it?

Thanks!

+1  A: 

This behavior, while mostly universal in modern browsers, is browser/implementation specific and almost completely unrelated to CSS or Javascript. In particular, note that Firefox maintains separate selection states for the page at large and the contents of text boxes, while IE does not do this. Even worse, consider text-mode browsers with separate mouse and keyboard selection interfaces.

Sparr
Thanks for your input. I realize that browsers handle text selection differently... just like they handle loads of other things differently. This doesn't make it impossible, just challenging.
sam
+2  A: 

This works for me on Firefox, haven't tried IE though. Try clicking on the foo.style.preventDeselect = "true"; line when you have text selected. Uses the mousedown event.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
</head>
<script>
$(document).ready(function() {
    $('#test').mousedown(function() {
        return false;
    });
});
</script>
<body>

Highlight some text on this webpage, then click basically anywhere on the document. Your selection will disappear.<br><Br>

Is there a way to prevent this behavior when the user clicks on a specific element, either by CSS or Javascript?<br><Br>

E.g.:<br><Br>

var element = document.getElementById("foo");<br>
foo.onclick = function(e){<br>
   //some magic here that prevents deselection from occuring<br>
}<br><Br>

or<br><Br>

<span id='test'>foo.style.preventDeselect = "true";</span><br><Br>

Thanks!<br><Br>

</body>
</html>
Paolo Bergantino
This works, but unfortunately disables the "onclick" event which I need. Maybe "preventDefault()" comes into play...
sam
onclick still works for me. Where do you need it?
Paolo Bergantino
I was wrong.. onclick works. Unfortunately, "return false" in IE still unselects text. Strangely enough, though, if you throw an error "onmousedown" text is not deselected
sam
Well I've been trying different things for the past 30 minutes and I can't get anything to work on IE (short of error throwing or using an alert onmousedown =p) so I leave you with this. Good luck.
Paolo Bergantino
Thanks for the effort :) I edited my post.. perhaps it's possible to remember the selection, then after mouseclick, restore it?
sam
Thats what I was thinking, but thats going down a slope I don't want to get into.
Paolo Bergantino
I hear ya... ranges and the like are not fun. I think I might actually opt for the the error on IE. Do people even notice it?
sam
A: 

"return false" as well as "e.preventDefault()" in onmousedown works in FF and Safari, but not IE. The only solution for IE, as far as I can tell, is to throw an error.

This works in all browsers (but causes an error in IE, since preventDefault is not a method):

//clicking the 'test' element will not deselect text.
var test = document.getElementById("test");
test.onmousedown = function(e){
  e = e || window.event;
  e.preventDefault();
}

I'd still like to do this error-free in IE, if possible

Thanks to Paolo Bergantino for the the "onmousedown" tip.

sam
+1  A: 

What about

if(e.preventDefault) 
    e.preventDefault();
else
    e.returnValue = false;
Luca Matteis
This still deselects text in IE
sam
A: 

Just in case somebody checks this out, I had a similar problem. I needed to run some javascript on a piece of selected text that was fired by clicking on a toolbar button (span with background-image). I solved my problem by changing the spans to anchors with an href of "javascript:void(0)". That prevented my selected text from being deselected.

Kerby
A: 

Hello there, the best way that I figured out how to do this is, for IE you need to setup a listener on 'onselectstart'. For Mozilla and other browsers you can do on 'mousedown'. This will only work, if you don't use 'mousedown' in any other portion of your site!

Snippet: YUI way: FF browser:

  • YAHOO.util.Event.addListener(window, 'mousedown', function(evt) { YAHOO.util.Event.preventDefault(evt); });

    IE Browser: In IE you are not allowed to set this listener on window, since in IE it doesn't work. best thing to do is on your body element set a class element, then reference it, and apply the listener to that element object.

  • // Get the element by class and assign to var bar YAHOO.util.Event.addListener(bar, 'selectstart', function(evt) { YAHOO.util.Event.preventDefault(evt); });

if you want to do it the easy way, just do

  • window.onMouseDown = function() {return false;}

or for IE

  • body.onSelectStart = function() {return false;}

Hope this helps.

ericg