IE中的文本选择预防问题

Question

I want to prevent selection for a particular html element, so tried applying the "user-select" CSS property to make this happen across all the browsers. something like below.

    .section1{
      -webkit-user-select: none;  /* Chrome all / Safari all */
      -moz-user-select: none;     /* Firefox all */
      -ms-user-select: none;      /* IE 10+ */
      user-select: none;          /* Likely future */    
    }

This works fine when I applied "user-select" CSS property as "none" for all the "sections div". But when the section (section2) in between the top (section1) and the bottom (section3) doesn't have the property applied, and selection is happening when the selection starts from either from section1(top) or section2(bottom) and extends till section 2(midddle).

This issue happens only in IE and the same works fine in chrome and firefox.

Enclosed JSFiddle link for the same. https://jsfiddle.net/Thirunavukkarasu/bwf5emvp/

Answer 1

For IE < 10 (also IE10 if user-select not working ) and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

<div id="Div1" unselectable="on" class="unselectable">...</div>

Java Script :

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