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, mouseup, mousedown.

MouseEvent deriva de UIEvent, que por sua vez deriva de Event. Embora o método MouseEvent.initMouseEvent() 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 e DragEvent.

Event UIEvent MouseEvent

Construtor

MouseEvent()

Cria um objeto MouseEvent.

Propriedades

Essa interface também herda propriedades de seus pais, UIEvent e Event.

MouseEvent.altKey Read only

Retorna truese a tecla

alt

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.button Read only

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

MouseEvent.buttonsRead 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 Read only

Retorna true se a tecla

control

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.metaKey Read only

Retorna true se a tecla

meta

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.movementXRead only

A coordenada X do ponteiro do mouse em relação à posição do último evento mousemove .

MouseEvent.movementY Read only

A coordenada Y do ponteiro do mouse em relação à posição do último evento mousemove.

MouseEvent.offsetX Read only

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

MouseEvent.offsetY Read only

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

MouseEvent.pageX Read only

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

MouseEvent.pageY Read only

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

MouseEvent.region Read only

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

MouseEvent.relatedTargetRead only

O destino secundário do evento, se houver.

MouseEvent.screenXRead only

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

MouseEvent.screenY Read only

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

MouseEvent.shiftKey Read only

Retorna true se a tecla

shift

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.which 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 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 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 Read only

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

MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN 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 e Event.

MouseEvent.getModifierState()

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

MouseEvent.initMouseEvent()

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. PointerEvent: Para eventos de ponteiro avançados, incluindo multitoque