MouseEvent

A interface MouseEvent representa eventos que ocorrem devido à interação do usuário com um dispositivo apontador (como um mouse). Eventos comuns usando esta interface incluem click, dblclick (en-US), mouseup (en-US), mousedown.

MouseEvent deriva de UIEvent (en-US), que por sua vez deriva de Event. Embora o método MouseEvent.initMouseEvent() (en-US) seja mantido para compatibilidade com versões anteriores, a criação de um objeto MouseEvent deve ser feita usando o construtor MouseEvent().

Vários eventos mais específicos derivam de MouseEvent como: WheelEvent (en-US) e DragEvent (en-US).

Event UIEvent (en-US) MouseEvent

Construtor

MouseEvent() (en-US)

Cria um objeto MouseEvent.

Propriedades

Essa interface também herda propriedades de seus pais, UIEvent (en-US) e Event.

MouseEvent.altKey (en-US) Read only

Retorna truese a tecla

alt

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.button (en-US) Read only

O número do botão que foi pressionado (se aplicável) quando o evento do mouse foi disparado.

MouseEvent.buttons (en-US)Read only

Os botões sendo pressionados (se houver) quando o evento do mouse foi disparado.

MouseEvent.clientX Read only

A coordenada X do ponteiro do mouse em coordenadas locais (conteúdo DOM).

MouseEvent.clientYRead only

A coordenada Y do ponteiro do mouse em coordenadas locais (conteúdo DOM).

MouseEvent.ctrlKey (en-US) Read only

Retorna true se a tecla

control

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.metaKey (en-US) Read only

Retorna true se a tecla

meta

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.movementX (en-US)Read only

A coordenada X do ponteiro do mouse em relação à posição do último evento mousemove (en-US) .

MouseEvent.movementY (en-US) Read only

A coordenada Y do ponteiro do mouse em relação à posição do último evento mousemove (en-US).

MouseEvent.offsetX (en-US) Read only

A coordenada X do ponteiro do mouse em relação à posição da borda de preenchimento do nó de destino.

MouseEvent.offsetY (en-US) Read only

A coordenada Y do ponteiro do mouse em relação à posição da borda de preenchimento do nó de destino.

MouseEvent.pageX (en-US) Read only

A coordenada X do ponteiro do mouse em relação a todo o documento.

MouseEvent.pageY (en-US) Read only

A coordenada Y do ponteiro do mouse em relação a todo o documento.

MouseEvent.region (en-US) Read only

Retorna o id da região afetada pelo evento. Se nenhuma região atingida for afetada, null será retornado.

MouseEvent.relatedTarget (en-US)Read only

O destino secundário do evento, se houver.

MouseEvent.screenX (en-US)Read only

A coordenada X do ponteiro do mouse em coordenadas globais (tela).

MouseEvent.screenY (en-US) Read only

A coordenada Y do ponteiro do mouse em coordenadas globais (tela).

MouseEvent.shiftKey (en-US) Read only

Retorna true se a tecla

shift

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.which (en-US) Read only

O botão sendo pressionado quando o evento do mouse foi disparado.

MouseEvent.mozPressure Read only

A quantidade de pressão aplicada a um dispositivo de toque ou tablet ao gerar o evento; este valor varia entre 0.0 (pressão mínima) e 1.0 (pressão máxima).

MouseEvent.mozInputSource (en-US) Read only

O tipo de dispositivo que gerou o evento (uma das constantes MOZ_SOURCE_* listadas abaixo). Isso permite, por exemplo, determinar se um evento de mouse foi gerado por um mouse real ou por um evento de toque (o que pode afetar o grau de precisão com que você interpreta as coordenadas associadas ao evento).

MouseEvent.webkitForce (en-US) Read only

A quantidade de pressão aplicada ao clicar

MouseEvent.xRead only

Alias para MouseEvent.clientX.

MouseEvent.y Read only

Alias para MouseEvent.clientY

Constantes

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN (en-US) Read only

Força mínima necessária para um clique normal.

MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN (en-US) Read only

Força mínima necessária para um clique de força

Método

Essa interface também herda métodos de seus pais, UIEvent (en-US) e Event.

MouseEvent.getModifierState() (en-US)

Retorna o estado tual da tecla modificadora especificada. Consulte KeyboardEvent.getModifierState (en-US)() (en-US) para obter detalhes.

MouseEvent.initMouseEvent() (en-US)

Inicializa o valor de um MouseEvent criado. Se o evento já foi despachado, este método não faz nada.

Exemplo

Este exemplo demonstra a simulação de um clique (que está gerando programaticamente um evento de clique) em uma caixa de seleção usando métodos DOM.

js
function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  var cb = document.getElementById("checkbox"); //element to click on
  var canceled = !cb.dispatchEvent(evt);
  if (canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}
document.getElementById("button").addEventListener("click", simulateClick);
html
<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p><button id="button">Click me</button></p>

Clique no botão para ver como funciona a amostra:

Especificações

Specification
UI Events
# interface-mouseevent
CSSOM View Module
# extensions-to-the-mouseevent-interface
Pointer Lock 2.0
# extensions-to-the-mouseevent-interface

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também

Seu pai direto, UIEvent (en-US). PointerEvent (en-US): Para eventos de ponteiro avançados, incluindo multitoque