Disable text selection on Double-click in CSS or JavaScript

# Table of Contents

# Disable text selection on Double-click using CSS

If you need to disable text selection on double-click using CSS, set the element's user-select CSS property to none.

When the user-select property is set to none, the text of the element and its sub-elements is not selectable.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .text {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
      }
    </style>
  </head>

  <body>
    <h2 class="text">bobbyhadz.com</h2>

    <p class="text">Website: bobbyhadz.com</p>
  </body>
</html>

disable text selection on double click using css

The code for this article is available on GitHub

We set the class attribute on the two elements to text and used the class to set the user-select CSS property to none.

The user-select property controls whether the user can select the element's text.

When the property is set to none, the text of the element and its sub-elements is not selectable.

You can also set user-select to none on multiple elements by wrapping them with a div tag.

index.html

Copied!
<div style="user-select: none;">
  <h2>bobbyhadz.com</h2>

  <p>Website: bobbyhadz.com</p>
</div>

The example uses an inline style tag, however, you can also use an external .css file.

Here is the updated index.html.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h2 class="text">bobbyhadz.com</h2>

    <p class="text">Website: bobbyhadz.com</p>
  </body>
</html>

The code for this article is available on GitHub

And here is the code for the style.css file.

style.css

Copied!
.text {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
}

The CSS properties set user-select to none for all browsers.

# Disable text selection on Double-click using JavaScript

To disable text selection on double-click using JavaScript:

Set a dblclick event listener on the element.
Check if there is selected text in the event handler function.
If the condition is met, remove the selection.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2 class="text">bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const paragraph = document.querySelector('.text');

paragraph.addEventListener('dblclick', event => {
  console.log('double-click event triggered');

  if (document.selection && document.selection.empty) {
    document.selection.empty();
  } else if (window.getSelection) {
    const selection = window.getSelection();
    selection.removeAllRanges();
  }
});

disable text selection on double click

The code for this article is available on GitHub

We used the document.querySelector method to select the p element and added a dblclick event listener to the element.

The dblclick event is triggered when the user's pointing device button is double-clicked.

In the event handler function, we check if there is a selection and clear it.

index.js

Copied!
paragraph.addEventListener('dblclick', event => {
  console.log('double-click event triggered');

  if (document.selection && document.selection.empty) {
    document.selection.empty();
  } else if (window.getSelection) {
    const selection = window.getSelection();
    selection.removeAllRanges();
  }
});

The selection.empty() and selection.removeAllRanges() methods remove all ranges from the selection.

# Disable text selection on Double-click using `event.detail`

You can also use the event.detail property to disable text selection on double click.

If the property returns a value greater than 1, then the user clicked multiple times.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2 class="text">bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const paragraph = document.querySelector('.text');

paragraph.addEventListener('mousedown', event => {
  if (event.detail > 1) {
    event.preventDefault();
  }
});

disable text selection on double click using event detail

We added a mousedown event listener to the paragraph.

The mousedown event is triggered at an element when the user's pointing device button is pressed while it's inside the element.

When the user clicks on the element, we check if they clicked more than once, in which case we prevent the default action (text selection) with the event.preventDefault() method.

The example above only disables text selection on double-click for the specific element.

If you need to disable text selection on double-click for all elements, set the event listener on the document.body element.

index.js

Copied!
document.body.addEventListener('mousedown', event => {
  if (event.detail > 1) {
    event.preventDefault();
  }
});

disable text selection on double click for all elements

Note that the user can still select the element's text with a single click, however, they can't select the element's text with a double-click.

If you want to prevent the user from selecting the element's text with a single or double-click, then remove the if statement.

index.js

Copied!
const paragraph = document.querySelector('.text');

paragraph.addEventListener('mousedown', event => {
  event.preventDefault();
});

disable text selection for single and double click

The example prevents the user from selecting the element's text with a single and double-click.

If you want to apply this to all elements in the document, add the mousedown event listener to the document.body element.

index.js

Copied!
document.body.addEventListener('mousedown', event => {
  event.preventDefault();
});

disable text selection on single and double click for all elements

# Disable text selection on Double-click using `onselectstart`

You can also set the onselectstart property to a function that returns false straight away to disable text selection on double-click.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2 class="text">bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const paragraph = document.querySelector('.text');

paragraph.onselectstart = function handleSelectStart() {
  return false;
};

disable text selection on double click using onselectstart

You can also set the event listener for all elements in the document.

index.js

Copied!
document.body.onselectstart = function handleSelectStart() {
  return false;
};

You can also use the addEventListener() method to add an event listener for the selectstart event.

index.js

Copied!
const paragraph = document.querySelector('.text');

paragraph.addEventListener('selectstart', event => {
  event.preventDefault();
});

The event listener can also be set on the document.body element if you need to disable text selection on double-click for all elements in the document.

index.js

Copied!
document.body.addEventListener('selectstart', event => {
  event.preventDefault();
});

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Disable text selection on Double-click in CSS or JavaScript

# Table of Contents

# Disable text selection on Double-click using CSS

# Disable text selection on Double-click using JavaScript

# Disable text selection on Double-click using event.detail

# Disable text selection on Double-click using onselectstart

# Additional Resources

Borislav Hadzhiev

# Disable text selection on Double-click using `event.detail`

# Disable text selection on Double-click using `onselectstart`