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.

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);
<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>

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

Especificações

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'MouseEvent' in that specification.
Rascunho de trabalho Redefine MouseEvent de longo para duplo. Isto significa que um PointerEvent cuja pointerType é rato será uma de casal.
HTML Living Standard
The definition of 'MouseEvent.region' in that specification.
Padrão em tempo real Do Document Object Model (DOM) Nível 3 Events Specification , adicionado propriedades movementX e movementY.
Pointer Lock
The definition of 'MouseEvent' in that specification.
Candidata a Recomendação
CSS Object Model (CSSOM) View Module
The definition of 'MouseEvent' in that specification.
Rascunho atual A partir do documento de modelo de objeto (DOM) Nível 3 Especificação de eventos , adicionados offsetX e offsetY, pageX e pageY, x, e y propriedades. Propriedades redefinidas de tela, página, cliente e coordenadas (x e y) a partir double de long.
Document Object Model (DOM) Level 3 Events Specification
The definition of 'MouseEvent' in that specification.
Obsoleto Em Document Object Model (DOM) Nível 2, especificação de eventos, adicionado ao construtor MouseEvent (), o método getModifierState() e a propriedade de buttons.
Document Object Model (DOM) Level 2 Events Specification
The definition of 'MouseEvent' in that specification.
Obsoleto Definição inicial.

Compatibilidade do navegador

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