Como bloquear a seleção de texto por double click com JavaScript

Neste artigo você vai aprender a como bloquear a seleção de texto por double click em JavaScript, utilizando um evento de DOM

Fala programador(a), beleza? Bora aprender mais sobre eventos e JavaScript!

Para adicionar esta funcionalidade ao nosso código vamos precisar do evento mousedown

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Que detecta exatamente o clique do mouse, porém precisamos da ação de double click

Então é necessário explorar este evento, buscando pela propriedade detail

Que é exatamente o evento de selecionar o texto após o clique duplo

Ao detectá-lo, basta utilizar o método preventDefault

Que enibe o comportamento padrão de seleção de texto

Veja na prática:

document.addEventListener('mousedown', function(e) {
  if (e.detail > 1) {
    e.preventDefault();
  }
}, false);

Aqui o evento está sendo mapeado no documento todo, você pode reduzir isso a um elemento, se isto for necessário

Veja que o addEventListnener está no elemento document

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como bloquear a seleção de texto por double click com JavaScript

Utilizamos o evento mousedown, em conjunto da sua propriedade detail

Bastou utilizar o método preventDefault, que não deixa este evento acontecer

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!