Comments on: Disable Selction on Menu Items with this jQuery Extension

By: Aleem

Aleem — Thu, 06 Jan 2011 08:53:33 +0000

Thomas, great find. I have updated the post so jQuery UI Core users can benefit from this.

Turns out jQuery UI code disables selections by calling preventDefault() on mousedown event (or selectstart event if the user agent supports it). So even without jQuery UI it might be possible to achieve the same by just copying their implementation.

The UI Core implementation also adds a ui-disableSelection class to the element so if the implementation is copied verbatim, it's possible to use the CSS for .button for .ui-disableSelection instead.

By: Thomas

Thomas — Wed, 05 Jan 2011 13:59:09 +0000

Included in the core library of jQuery UI are two functions: enableSelection() and disableSelection(). They do not show up in the documentation, but they are in there :)

By: Aleem

Aleem — Mon, 27 Sep 2010 21:41:02 +0000

Thanks for bringing it up though, I updated the post since it’s easy to gloss over the comments. The code is a bit more air-tight now. I don’t use the Javascript solution anymore though since the CSS-only solution works rather well on modern browsers.

By: Charlie

Charlie — Mon, 27 Sep 2010 19:42:46 +0000

I should read other’s comments before replying, huh? :-o

By: Charlie

Charlie — Mon, 27 Sep 2010 19:41:23 +0000

you should return the result of each so that it’s chainable.

jQuery.fn.disableSelection = function() { return this.each(function() { this.onselectstart = function() { return false; }; this.unselectable = "on"; jQuery(this).css('-moz-user-select', 'none'); }); };

By: Dinesh

Dinesh — Thu, 15 Jul 2010 05:31:28 +0000

It works well. Thanks for this extension.

By: Eric

Eric — Sat, 31 Oct 2009 22:25:41 +0000

Since Safari 3+, Webkit has used a different synax (docs):

-webkit-user-select

... and I had to explicitly return, or I got errors, so --

disableSelection : function() { 
   return this.each(function() { 
   ...

By: Nick

Nick — Fri, 31 Jul 2009 19:21:40 +0000

or you could add 3 simple lines to your stylesheet

#map { -moz-user-select: none; -khtml-user-select: none; user-select: none;}

By: Joe Andrieu

Joe Andrieu — Mon, 06 Jul 2009 09:51:44 +0000

Clean, indeed. Worked at first attempt.

Thanks!

By: Alpenmilch

Alpenmilch — Mon, 30 Mar 2009 11:48:34 +0000

Thanks for this nice and clean solution, works like a charm!