In Firefox seems fine, Chrome and Internet Explorer the text is still selectable, is there any way around this? The code was taken from another question, (which I can't find right now) so it may be out of date?
// Prevent selection
function disableSelection(target) {
if (typeof target.onselectstart != "undefined") // Internet Explorer route
target.onselectstart = function() { return false }
else if (typeof target.style.MozUserSelect != "undefined") // Firefox route
target.style.MozUserSelect = "none"
else // All other routes (for example, Opera)
target.onmousedown = function() { return false }
}
Used in code as:
disableSelection(document.getElementById("gBar"));
For webkit use khtmlUserSelect
instead of MozUserSelect
.
In opera and MSIE you may set the unselectable-property to "On"
As the both styles related to gecko/webkit are CSS, you can use a class to apply it:
<script type="text/javascript">
<!--
function disableSelection(target)
{
target.className='unselectable';
target.setAttribute('unselectable','on');
}
//-->
</script>
<style type="text/css">
<!--
.unselectable{
-moz-user-select:none;
-khtml-user-select: none;
}
-->
</style>
Note: unselectable will not pass on child-elements, so if you have there anything else than textNodes inside target, you need the workaround you already have there for MSIE/opera.