Javascript disabling contents selection.

Question

onmousedown and draggin the contents of Container will be selected. How can I disable this selection behaviour.

Answer 1

Using javascript: http://www.dynamicdrive.com/dynamicindex9/noselect.htm

You can choose to disable selection on entire page or on certain elements as explained on that page.

Answer 2

To cover all bases, set all these properties in your css:

user-select: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none

Answer 3

I've written Prototype.JS methods for this, you can use them.

Element.addMethods({
    /**
     * Makes element unselectable. Disables cursor select
     * @param {Object} target
     */
    setUnselectable: function(target){
        if (typeof target.onselectstart != "undefined") {target.onselectstart = function(){return false;};}
        else if (typeof target.style.MozUserSelect != "undefined") { target.style.MozUserSelect = "none";}
        else {target.onmousedown = function(){ return false;}; }
        return target;
    },
    /**
     * Reverts unselectable effect, Enables cursor select
     * @param {Object} target
     */
    setSelectable: function(target){
        if (typeof target.onselectstart != "undefined") { target.onselectstart = document.createElement("div").onselectstart; }
        else if (typeof target.style.MozUserSelect != "undefined") { target.style.MozUserSelect = document.createElement("div").style.MozUserSelect; } 
        else { target.onmousedown = ""; }
        return target;
    }
});

To make an element unselectable

$('element_id').setUnselectable();

To revert it back

$('element_id').setSelectable();