MouseEvent
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
.
Construtor
MouseEvent()
-
Cria um objeto
MouseEvent
.
Propriedades
Essa interface também herda propriedades de seus pais, UIEvent
e Event
.
MouseEvent.altKey
Read only-
Retorna
true
se a teclaalt
estava pressionada quando o evento do mouse foi disparado.
-
O número do botão que foi pressionado (se aplicável) quando o evento do mouse foi disparado.
-
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.clientY
Read only-
A coordenada Y do ponteiro do mouse em coordenadas locais (conteúdo DOM).
MouseEvent.ctrlKey
Read only-
Retorna
true
se a teclacontrol
estava pressionada quando o evento do mouse foi disparado.
MouseEvent.metaKey
Read only-
Retorna
true
se a teclameta
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. -
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 teclashift
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) e1.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>
<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