JavaScript non selectable text not working in Chrome/Internet Explorer

Question

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"));

Answer 1

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.