Prevent text selection after double click

Targeted selection prevention: when and where

Achieving the best of both worlds by combining usability and functionality is key. While inadvertently selecting text can be annoying, completely disabling text selection isn't always the best approach. By combining the use of user-select property with adept JavaScript controls, you can target only the areas that are prone to pesky text selection issues without harming overall UX.

Apply the .no-select style sparingly, and combine it with JavaScript event handling for a more refined approach. For instance:

element.addEventListener('mousedown', function(e) {
  // Duck season? Rabbit season? Double-click season.
  var isDoubleClick = e.detail > 1;
  if(isDoubleClick) {
    if(!e.ctrlKey && !e.shiftKey && !e.altKey) {
      e.preventDefault();
    }
    clearSelection();
  }
});

function clearSelection() {
  if (window.getSelection) {
    window.getSelection().removeAllRanges();
  } else if (document.selection) {
    // The things we do for love... and compatibility
    document.selection.empty();
  }
}


The script prevents double-click text selection, but it allows for the use of other key-modified selections, such as Ctrl-click for multi-select, an important aspect of usability.

The art of being unselectable

There's a host of scenarios wherein you'd want to avoid text selection. Master the art:

Dynamic unicorns and static mules

Use inline styling to dynamically disable selection:

// Element turns into a monk, give up all worldly text selection
element.style.userSelect = "none";


Unselectable: The legacy support Saga

Historically, Internet Explorer required the utilization of the unselectable property. The.Selectable doesn't simply walk away:

<div unselectable="on" class="no-select">Unselectable content here. Double-click all you want! </div>


Editables are not untouchables

Watch out for contenteditable elements. At times, you might need to separately prevent text selection on child elements since this attribute does not handle this aspect for you.

Selection prevention in more complex UIs

For more dynamic and complex user interfaces, a robust solution is required. Let's look at few tricks:

The Event Delegation dance

With event delegation, you smoothly handle mousedown events even for dynamically added elements:

document.addEventListener('mousedown', function(e) {
  // Double click? Not on my watch!
  var target = e.target.closest('.no-select');
  if(target && e.detail > 1) {
    e.preventDefault();
  }
});


No need to bind the same listener multiple times.

Nested elements: just like Matryoshka dolls

When working with multiple nested elements, set user-select: none on parent elements to ensure all child elements receive the unselectability charm:

.parent-no-select * { 
  user-select: none; 
}


Onselectstart: the old sheriff in town

Try implementing good-ol onselectstart for greater block-level control:

element.onselectstart = function() { return false; };


Cross-browser consistency and usability

When implementing these strategies, focus on browser compatibility and usability. Consider implementing vendor-specific prefixes for user-select to ensure maximum browser coverage. Also, think about other keyboard shortcuts and accessibility considerations.

Bear in mind the response of your user interface. Users might need to select text on a larger screen with ease, but, on a mobile device, it could be more likely to result in accidental tap actions. Adjust the behavior based on the screen size with media queries:

@media (min-width: 768px) {
  .selectable-on-desktop { 
    user-select: text; 
  }
}
