CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

I'm doing a live editing thing, but only want certain portions of the page to be selectable. How do I disable selection开发者_运维技巧 on everything except within a single div?

Perhaps the CSS property user-select ?

cross-browser :

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

Doc :

http://www.w3.org/TR/2000/WD-css3-userint-20000216.html#user-select

Perhaps you could add the following listeners to the divs / sections you want to prevent selection ?

window.onload = function() {
  var element = document.getElementById('content');
  element.onselectstart = function () { return false; } // ie
  element.onmousedown = function () { return false; } // the rest
}

EDIT: See comments

Put a div (positioned absolute) on top of the elements you want to make un-selectable.