Boa noite Vitória, tudo certo?
Essa é uma ótima pergunta! Eu dei uma olhada na documentação da Mozilla e encontrei alguns comportamentos interessantes no funcionamento dos métodos onmouseup e onmousedown e adoraria compartilhar contigo:
Esses eventos contém vários parâmetros quando são acionados, sendo dois de interesse o button e buttons.
O button nos informa qual dos botôes que foi utilizado para acionar aquele evento, atribuindo determinados valores à cada botão. Os resultados que observei no navegador Mozilla Firefox foram:
| Parâmetro | Botão apertado | Código respectivo |
|---|
button | Botão esquerdo do mouse | 0 |
button | Botão do meio do mouse | 1 |
button | Botão direito do mouse | 2 |
buttons | Botão esquerdo do mouse | 1 |
buttons | Botão do meio do mouse | 2 |
buttons | Botão direito do mouse | 4 |
E pelo que entendi, o parâmetro button é bem antigo e caiu em desuso, mas é mantido por razões históricas e projetos legados. Outro motivo para utilizar o buttons é que se você apertar mais de um botão ao mesmo tempo ele retorna a soma dos valores dos botões que foram pressionados.
Caso queira brincar um pouco, eu fiz um site super simples para ver como funciona o evento onmousedown. Basta copiar esse código e salvar em um arquivo com o final .html e abrir no seu navegador:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Site para testar o evento do onmousedown</title>
<link rel="stylesheet" href="style.css" />
</head>
<body id="home">
<p class="minhaClasse">Me clique e olhe o console!</p>
<script>
const content = document.querySelector('.minhaClasse');
content.onmousedown = function (event) {
// Retire o comentário abaixo para ver o evento inteiro!
//console.log(event);
console.table(event.button, event.buttons);
}
</script>
</body>
</html>
Espero ter ajudado e bons estudos!
