Making things unselectable in IE

问题

Here is my chart I\'ve been writing in JS:

http://jsfiddle.net/49FVb/

The css:

-moz-user-select:none;
-khtml-user-select: none;

Works fine for Chrome/FF, but in IE all the elements are still selectable which looks weird when dragging the bars around.

How can I make this unselectable in IE?

回答1:

In IE, you need the unselectable attribute in HTML:

<div id="foo" unselectable="on">...</div>

... or set it via JavaScript:

document.getElementById("foo").setAttribute("unselectable", "on");

The thing to be aware of is that the unselectableness is not inherited by children of an unselectable element. This means you either have to put an attribute in the start tag of every element inside the <div> or use JavaScript to do this recursively for an element's descendants:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

回答2:

You can use Javascript to make text unselectable in all browsers:

document.onselectstart=new Function('return false');
function noselect(e){return false;}
function click(){return true;}
document.onmousedown=noselect;
document.onclick=click;

Another way is described in this SO thread: Is there a way to make text unselectable on an HTML page?

The cheapest way probably is <body onselectstart="return false">

The best way though is possibly using the following CSS:

[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }

and add the IE unselectable property to the elements you want to make unselectable (unselectable="on" in HTML; element.setAttribute("unselectable","on") in javascript)

Check out this nice small article about unselectable text.

回答3:

There is an unselectable="on" attribute.

http://msdn.microsoft.com/en-us/library/ms537840%28VS.85%29.aspx

And related SO thread: Is there a way to make text unselectable on an HTML page?

回答4:

This seems to work well in Chrome and IE11 so far, using JQuery...

function fMakeNodeUnselectable(node){      
    $(node).css({"cursor":"default","-moz-user-select":"-moz-none","-khtml-user-select":"none","-webkit-user-select":"none","-o-user-select":"none","user-select":"none"});
    $(node).attr("unselectable","on");
}

来源：https://stackoverflow.com/questions/4448671/making-things-unselectable-in-ie

标签

javascript

cross-browser

selectable