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).
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
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
(en-US) Read only-
Retorna
true
se a teclacontrol
estava pressionada quando o evento do mouse foi disparado.
MouseEvent.metaKey
(en-US) Read only-
Retorna
true
se a teclameta
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. -
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 teclashift
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) e1.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.
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
(en-US).
PointerEvent
(en-US): Para eventos de ponteiro avançados, incluindo multitoque