Impedir la selección de un elemento del DOM

  • 20 Abr 2015
  • jQuery, JavaScript

Antes de empezar, que algo quede claro: Pocas cosas son más feas que encontrar lo que uno busca y no poder copiarlo porque el sitio no te deja. Como esos sitios de principios del 2000 que con el click derecho salía el mensaje de copyright. Un gif animado era más útil. Y pegarle a tu vieja menos feo.

Bien utilizado, no dejar que un texto o imagen sea seleccionado puede ayudar al usuario en lugares donde solo accidentalmente pueda seleccionar una porción de contenido creando solo molestias a la usabilidad. Un ejemplo podría ser un dropdown de Bootstrap

Menú con texto seleccionado accidentalmente

Menú con texto sin seleccionar

Implementación

Lo único necesario es crear una función y luego aplicarla a los elementos que quisieramos proteger

$.fn.disableSelection = function() {
    return this
      .attr('unselectable', 'on')
      .css('user-select', 'none')
      .on('selectstart', false);
  };

$("div.dropdown").disableSelection();