Making an element unselectable using jQuery

Question

What\'s the best way to make an element unselectable using jQuery?

I know you can use onselectstart=\"return false;\" ondragstart=\"return false;\" in the H

Answer 1

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

Just bind the event to a live, and return false, or prevent default.

Answer 2

I believe this is a better answer.

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

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

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

Answer 3

I think jQuery will abstract the browser variance & so it will help you make HTML elements unselectable.

Having said that, please note that the client can decide to switch off javascript, in which case you need to ensure that he still cannot do anything that will cause harm...

HTH.

Answer 4

If you use JqueryUI you can set class="ui-state-default" to the div that you dont want to be selected.

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