Skip to main content

How to Disable Text Selection on Double-Click in JavaScript and CSS

By default, when a user double-clicks on text in a web browser, that text becomes highlighted or selected. While this is often desired behavior, there are many UI components—like buttons, interactive icons, or custom controls—where this text selection is distracting and should be disabled.

This guide will teach you the two standard, modern methods for preventing this default double-click behavior. You will learn the recommended CSS-only approach, which is the simplest and most effective solution, and a JavaScript-based alternative for more dynamic control.

The simplest and most robust way to prevent text selection is with the user-select CSS property. By setting its value to none, you instruct the browser not to allow text selection on that element or any of its children.

This method has the advantage of preventing selection from all types of interactions—single-click-and-drag, double-click, and triple-click—not just double-clicks.

For example, we have an interactive element, and we want to prevent the text inside it from being highlighted when a user double-clicks it.

<button id="my-button" class="no-select">Click Me!</button>
<p>You can select this text.</p>

Solution: add the user-select: none; rule to a CSS class and apply it to your element.

.no-select {
  /* Standard property */
  user-select: none;
  
  /* Vendor-prefixed versions for older browser compatibility */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
}
note

Now, the text inside the button cannot be selected, but the text in the paragraph remains selectable as normal. This is the cleanest and most efficient solution.

The JavaScript Method: Using the mousedown Event​

If you need to disable selection dynamically with JavaScript, you can do so by listening for the mousedown event and preventing its default behavior. The event.detail property can be used to specifically target double-clicks.

The logic:

  1. Add a mousedown event listener to the target element.
  2. The event.detail property is a counter that tracks the number of consecutive clicks. A double-click will have a detail value of 2.
  3. If the detail is greater than 1 (to catch double-clicks, triple-clicks, etc.), call event.preventDefault(). This will stop the browser from initiating the text selection action.

For example, we want to use JavaScript to prevent double-click selection on a specific element.

<p id="interactive-text">Double-click me to see what happens.</p>

Solution:

const element = document.getElementById('interactive-text');

element.addEventListener('mousedown', (event) => {
  // event.detail is 1 for a single-click, 2 for a double-click, etc.
  if (event.detail > 1) {
    event.preventDefault();
    // This prevents the browser's default double-click action (text selection).
  }
});

With this script, a user can still select the text with a single-click and drag, but a double-click will do nothing.

To disable all selection on the element, you can remove the if condition:

element.addEventListener('mousedown', (event) => {
  event.preventDefault(); // Prevents selection from all mouse clicks
});

This JavaScript approach achieves a similar result to the CSS user-select property.

Conclusion: Which Method Should You Use?​

Choosing the right method is simple.

  • For a static, permanent solution where an element should never be selectable, the CSS user-select: none; property is the clear best practice. It is more performant, easier to maintain, and handles all selection types automatically.
  • For dynamic or conditional scenarios where you need to enable or disable selection with JavaScript, the mousedown event with event.preventDefault() is the correct and most reliable approach.

For the vast majority of use cases, the CSS method is the superior and recommended choice.

Table of Contents