Creating a non-selectable element with jQuery

Question

What is the best way to make an element unselectable using jQuery?

I know that you can use onselectstart="return false;" ondragstart="return false;" onselectstart="return false;" ondragstart="return false;" in HTML, but I'm not sure how compatible this is with the browser.

I also see that someone created the jQuery plugin: http://plugins.jquery.com/project/Unselectable .. do I need such a plugin?

Is there a simple, compatible way to make an element non-selectable?

The reason for wanting to do this is purely aesthetic. With web pages that drag and drop events, it is not very nice when things are selected.

Answer 1

$('.noselect').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });

Just bind the event to a live one, and return false or disable the default use.

Answer 2

I think jQuery will abstract the variance of the browser, and therefore this will help you make HTML elements non-selectable.

Having said that, keep in mind that the client may decide to disable javascript, in which case you need to make sure that it still can not do anything that could be harmful ...

NTN.

Answer 3

I think this is the best answer.

 $('*[data-noselect="true"]').focus( function () { $(this).blur(); }); $('*[data-noselect="true"] *').focus( function () { $(this).blur(); }); 

Then you can simply add data-noselect="true" to any element.

Answer 4

If you use JqueryUI , you can set class="ui-state-default" in a div that you do not want to select.

 <div class="ui-state-default"></div>