Eventos de mouse JavaScript

Resumo : neste tutorial, você aprenderá sobre os eventos básicos do mouse e suas propriedades em JavaScript.

Introdução aos eventos de mouse JavaScript

Os eventos do mouse são acionados quando você usa o mouse para interagir com os elementos da página. Os eventos DOM nível 3 definem nove eventos de mouse.

mousedown, mouseup, eclick

Quando você clickcria um elemento, há pelo menos três eventos de mouse disparados na seguinte sequência:

1. O mousedowndisparo quando você pressiona o botão do mouse no elemento.
2. O mouseupdisparo ocorre quando você solta o botão do mouse no elemento.
3. O clickincêndio ocorre quando um mousedowne um mouseupsão detectados no elemento.

Se você pressionar o botão do mouse em um elemento e mover o mouse para fora do elemento, solte o botão do mouse. O único mousedownevento é acionado no elemento.

Da mesma forma, se você pressionar o botão do mouse, mover o mouse sobre o elemento e soltar o botão do mouse, o único mouseupevento será acionado no elemento.

Em ambos os casos, o clickevento nunca é acionado.

dblclick

Na prática, você raramente usa o dblclickevento. O dblclickevento é acionado quando você clica duas vezes em um elemento.

São necessários dois eventos de clique para dblclickdisparar um evento. O dblclickevento tem quatro eventos disparados na seguinte ordem:

1.  mousedown
2.  mouseup
3.  click
4.  mousedown
5.  mouseup
6.  click
7.  dblclick

Como você pode ver, os clickeventos sempre acontecem antes do dblclickevento. Se você registrar ambos clickos dblclickmanipuladores de eventos no mesmo elemento, não saberá exatamente qual usuário realmente clicou ou clicou duas vezes no elemento.

 mousemove

O mousemoveevento é acionado repetidamente quando você move o cursor do mouse em torno de um elemento. Mesmo quando você move o mouse um pixel, o mousemoveevento ainda é acionado. Isso fará com que a página fique lenta, portanto, você só registra mousemoveo manipulador de eventos quando precisar dele e remove imediatamente o manipulador de eventos assim que ele não for mais usado, assim:

element.onmousemove = mouseMoveEventHandler;
// ...
//  later, no longer use
element.onmousemove = null;Linguagem de código:  JavaScript  ( javascript )

mouseover/mouseout

O mouseoveré acionado quando o cursor do mouse está fora do elemento e depois se move para dentro dos limites do elemento.

O mouseouté acionado quando o cursor do mouse está sobre um elemento e depois move outro elemento.

mouseenter/mouseleave

O mouseenteré acionado quando o cursor do mouse está fora de um elemento e depois se move para dentro dos limites do elemento.

O mouseleaveé acionado quando o cursor do mouse está sobre um elemento e depois se move para fora dos limites do elemento.

Ambos mouseentere mouseleavenão borbulham e não disparam quando o cursor do mouse se move sobre os elementos descendentes.

Registrando manipuladores de eventos de mouse

Para registrar um evento de mouse, siga estas etapas:

• Primeiro, selecione o elemento usando o método querySelector()ou getElementById().
• Em seguida, registre o evento do mouse usando o addEventListener()método.

Por exemplo, suponha que você tenha o seguinte botão:

<button id="btn">Click Me!</button>Linguagem de código:  HTML, XML  ( xml )

Para registrar um manipulador de eventos de clique do mouse, use o seguinte código:

let btn = document.querySelector('#btn');

btn.addEventListener('click',(event) => {
    console.log('clicked');
});Linguagem de código:  JavaScript  ( javascript )

ou você pode atribuir um manipulador de eventos de mouse à propriedade do elemento:

let btn = document.querySelector('#btn');

btn.onclick = (event) => {
    console.log('clicked');
};Linguagem de código:  JavaScript  ( javascript )

Em sistemas legados, você pode descobrir que o manipulador de eventos é atribuído no atributo HTML do elemento:

<button id="btn" onclick="console.log('clicked')">Click Me!</button>Linguagem de código:  HTML, XML  ( xml )

É uma boa prática sempre usar o addEventListener()para registrar um manipulador de eventos de mouse.

Detectando botões do mouse

O eventobjeto passado para o manipulador de eventos do mouse possui uma propriedade chamada buttonque indica qual botão do mouse foi pressionado para acionar o evento.

O botão do mouse é representado por um número:

• 0: o botão principal do mouse é pressionado, geralmente o botão esquerdo.
• 1: o botão auxiliar é pressionado, geralmente o botão do meio ou o botão da roda.
• 2: o botão secundário é pressionado, geralmente o botão direito.
• 3: o quarto botão é pressionado, geralmente o botão Voltar do navegador.
• 4: o quinto botão é pressionado, geralmente o botão Avançar do navegador .

Veja o exemplo a seguir:

<!DOCTYPE html>
<html>
<head>
    <title>JS Mouse Events - Button Demo</title>
</head>
<body>
    <button id="btn">Click me with any mouse button: left, right, middle, ...</button>
    <p id="message"></p>
    <script>
        let btn = document.querySelector('#btn');

        // disable context menu when right-mouse clicked
        btn.addEventListener('contextmenu', (e) => {
            e.preventDefault();
        });

        // show the mouse event message
        btn.addEventListener('mouseup', (e) => {
            let msg = document.querySelector('#message');
            switch (e.button) {
                case 0:
                    msg.textContent = 'Left mouse button clicked.';
                    break;
                case 1:
                    msg.textContent = 'Middle mouse button clicked.';
                    break;
                case 2:
                    msg.textContent = 'Right mouse button clicked.';
                    break;
                default:
                    msg.textContent = `Unknown mouse button code: ${event.button}`;
            }
        });
    </script>
</body>
</html>
Linguagem de código:  HTML, XML  ( xml )

Neste exemplo, quando você clica no botão com o mouse (clique esquerdo, clique direito e clique com o meio), ele mostra uma mensagem correspondente no <div>elemento.

Teclas modificadoras

Ao clicar em um elemento, você pode pressionar uma ou mais teclas modificadoras: Shift, Ctrl, Alt e Meta.

Observe que a tecla Meta é a tecla Windows nos teclados do Windows e a tecla Command no teclado Apple.

Para detectar se essas teclas modificadoras foram pressionadas, você pode usar o eventobjeto passado para o manipulador de eventos do mouse.

O eventobjeto possui quatro propriedades booleanas, onde cada uma é definida truecomo se a tecla estiver sendo pressionada ou falsese a tecla não for pressionada.

Veja o exemplo a seguir:

<!DOCTYPE html>
<html>
<head>
    <title>JS Modifier Keys Demo</title>
</head>
<body>
    <button id="btnKeys">Click me with Alt, Shift, Ctrl pressed</button>
    <p id="messageKeys"></p>

    <script>
        let btnKeys = document.querySelector('#btnKeys');

        btnKeys.addEventListener('click', (e) => {
            let keys = [];

            if (e.shiftKey) keys.push('shift');
            if (e.ctrlKey) keys.push('ctrl');
            if (e.altKey) keys.push('alt');
            if (e.metaKey) keys.push('meta');

            let msg = document.querySelector('#messageKeys');
            msg.textContent = `Keys: ${keys.join('+')}`;
        });
    </script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Obtendo coordenadas da tela

As propriedades screenXe screenYdo evento passado para o manipulador de eventos do mouse retornam as coordenadas da tela da localização do mouse em relação à tela inteira.

Por outro lado, as propriedades clientXe clientYfornecem as coordenadas horizontais e verticais dentro da área cliente da aplicação em que ocorreu o evento do mouse:

Veja a seguinte demonstração:

<!DOCTYPE html>
<html>
<head>
    <title>JS Mouse Location Demo</title>
    <style>
        #track {
            background-color: goldenrod;
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>Move your mouse to see its location.</p>
    <div id="track"></div>
    <p id="log"></p>

    <script>
        let track = document.querySelector('#track');
        track.addEventListener('mousemove', (e) => {
            let log = document.querySelector('#log');
            log.innerText = `
            Screen X/Y: (${e.screenX}, ${e.screenY})
            Client X/Y: (${e.clientX}, ${e.clientY})`
        });
    </script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Resumo

• O DOM Nível 3 define nove eventos de mouse.
• Use addEventListener()o método para registrar um manipulador de eventos de mouse.
• Indica event.buttonqual botão do mouse foi pressionado para acionar o evento do mouse.
• As teclas modificadoras: alt, shift, ctrl e meta (Mac) podem ser obtidas por meio de propriedades do objeto de evento passado para o manipulador de eventos do mouse.
• As propriedades screenXe screenYretornam as coordenadas horizontais e verticais do ponteiro do mouse nas coordenadas da tela.
• As propriedades clientXe clientYdo eventobjeto retornam coordenadas horizontais e verticais dentro da área cliente do aplicativo na qual ocorreu o evento do mouse.