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

MouseEvent deriva deUIEvent, que por sua vez deriva deEvent. Embora o métodoMouseEvent.initMouseEvent() seja mantido para compatibilidade com versões anteriores, a criação de um objetoMouseEvent deve ser feita usando o construtorMouseEvent().

Vários eventos mais específicos derivam deMouseEvent como:WheelEvent eDragEvent.

Construtor

MouseEvent()

Cria um objetoMouseEvent.

Propriedades

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

MouseEvent.altKey Read only

Retornatruese 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.clientXRead only

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

MouseEvent.clientYRead only

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

MouseEvent.ctrlKey Read only

Retornatrue se a tecla

control

estava pressionada quando o evento do mouse foi disparado.

MouseEvent.metaKey Read only

Retornatrue 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 eventomousemove .

MouseEvent.movementY Read only

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

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

Retornatrue 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 entre0.0 (pressão mínima) e1.0 (pressão máxima).

MouseEvent.mozInputSource Read only

O tipo de dispositivo que gerou o evento (uma das constantesMOZ_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 paraMouseEvent.clientX.

MouseEvent.y Read only

Alias paraMouseEvent.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 eEvent.

MouseEvent.getModifierState()

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

MouseEvent.initMouseEvent()

Inicializa o valor de umMouseEvent 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étodosDOM.

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" /> Checked</label></p><p><button>Click me</button></p>

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

Especificações

Compatibilidade com navegadores

Veja também

Seu pai direto,UIEvent.PointerEvent: Para eventos de ponteiro avançados, incluindo multitoque