--- title: MouseEvent slug: Web/API/MouseEvent tags: - API - DOM - DOM Events - Interface - Precisa de Tradução - Referencia - TopicStub translation_of: Web/API/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.
 

{{InheritanceDiagram}}

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.relatedTarget Read only

O destino secundário do evento, se houver.

MouseEvent.screenX Read 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.

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:

{{EmbedLiveSample('Example')}}

Especificações

Specification Status Comment
{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}} Rascunho de trabalho Redefine MouseEvent de longo para duplo. Isto significa que um PointerEvent cuja pointerType é rato será uma de casal.
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}} {{Spec2('HTML WHATWG')}} Do Document Object Model (DOM) Nível 3 Events Specification , adicionado propriedades movementX e movementY.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}} {{Spec2('Pointer Lock')}}
{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}} {{Spec2('CSSOM View')}} 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.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}} {{Spec2('DOM3 Events')}} 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.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}} {{Spec2('DOM2 Events')}} Definição inicial.

Compatibilidade do navegador

{{ CompatibilityTable() }}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{domxref("MouseEvent.movementX","movementX")}}
{{domxref("MouseEvent.movementY","movementY")}}		 {{CompatChrome(37)}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{property_prefix("moz")}} {{ CompatUnknown() }} {{CompatVersionUnknown()}} {{ CompatUnknown() }}
{{ domxref("MouseEvent.buttons", "buttons") }} {{CompatChrome(43)}} {{CompatVersionUnknown()}} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{CompatNo}}
{{ domxref("MouseEvent.which", "which") }} {{CompatChrome(1)}} {{CompatVersionUnknown()}} 1.0 9.0 5.0 1.0
{{domxref("MouseEvent.getModifierState()", "getModifierState()")}} {{CompatChrome(47)}} {{CompatVersionUnknown()}} {{CompatGeckoDesktop(15)}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}} {{CompatVersionUnknown()}}
{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}} {{CompatNo}} {{ CompatUnknown() }} {{CompatGeckoDesktop(2)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} {{CompatChrome(45)}} {{ CompatUnknown() }} {{CompatGeckoDesktop(11)}} 9.0 {{CompatVersionUnknown()}} {{ CompatUnknown() }}
{{domxref("MouseEvent.region")}} {{CompatChrome(51)}}[1] {{ CompatUnknown() }} {{CompatGeckoDesktop(32)}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}} {{CompatVersionUnknown()}} 9 {{CompatGeckoDesktop(40)}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long. {{CompatChrome(56)}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[1] Requires enabling the ExperimentalCanvasFeatures flag.

Veja também

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