Question

Possible Duplicate:
Is there a way to make a DIV unselectable?

I have seen a number of solutions out there that work for an element. However I have an area with labels and buttons. It’s not just one element it’s every element within a DIV.

How can I make anything contained within that DIV unselectable? Note that I cannot just put a mask layer over the DIV as the DIV has buttons I need to be able to click.

Answer 1

$(".yourdiv").children().css({userSelect: 'none'});

That’s in case you want to disable selection using the CSS user-select property. If not, the above can be easily generalized to other methods.

The above only selects direct children, to select all descendants, use the .find() method:

$(".yourdiv").find("*").css({userSelect: 'none'});

You can also do this using pure CSS:

.yourdiv * { /*this selects all elements that are children of yourdiv*/
    /*user-select: none rules*/
}

Or:

.yourdiv > * { /*this selects all elements that are direct descendants of yourdiv*/
    /*user-select: none rules*/
}