From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/mouseevent/clientx/index.html | 149 ++++++++++ files/pt-br/web/api/mouseevent/clienty/index.html | 91 ++++++ files/pt-br/web/api/mouseevent/index.html | 336 ++++++++++++++++++++++ 3 files changed, 576 insertions(+) create mode 100644 files/pt-br/web/api/mouseevent/clientx/index.html create mode 100644 files/pt-br/web/api/mouseevent/clienty/index.html create mode 100644 files/pt-br/web/api/mouseevent/index.html (limited to 'files/pt-br/web/api/mouseevent') diff --git a/files/pt-br/web/api/mouseevent/clientx/index.html b/files/pt-br/web/api/mouseevent/clientx/index.html new file mode 100644 index 0000000000..efeb585203 --- /dev/null +++ b/files/pt-br/web/api/mouseevent/clientx/index.html @@ -0,0 +1,149 @@ +--- +title: MouseEvent.clientX +slug: Web/API/MouseEvent/clientX +translation_of: Web/API/MouseEvent/clientX +--- +

{{APIRef("DOM Events")}}

+ +

O clientX é uma propriedade somente de leitura da interface {{domxref("MouseEvent")}} que fornece as coordenadas horizontais dentro da área do aplicativo do cliente em que o evento ocorreu (diferente das coordenadas dentro da página). Por exemplo, clicando no canto superior esquerdo da área do cliente sempre irá resultar em um evento de mouse com um valor clientX de 0, independentemente se a página foi rolada horizontalmente. Originalmente, essa propriedade era definida como o número inteiro long. O Módulo de Visualização CSSOM o redefiniu como a fraçãodouble. Veja a seção de compatibilidade do Navegador para detalhes.

+ +

Sintaxe

+ +
var x = instanceOfMouseEvent.clientX
+
+ +

Valor de retorno

+ +

Um número

+ +

Exemplo

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>clientX/clientY example</title>
+
+    <script>
+      function showCoords(evt){
+        alert(
+          "clientX value: " + evt.clientX + "\n" +
+          "clientY value: " + evt.clientY + "\n"
+        );
+      }
+    </script>
+  </head>
+  <body onmousedown="showCoords(event)">
+    <p>Para mostrar as coordenadas do mouse em qualquer lugar da página.</p>
+  </body>
+</html>
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSSOM View','#dom-mouseevent-clientx', 'clientX')}}{{Spec2('CSSOM View')}}Redefine {{domxref("MouseEvent")}} delong para double. 
{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}{{Spec2('DOM3 Events')}}Nenhuma mudança de {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}{{Spec2('DOM2 Events')}}Definição inicial.
+ +

Compatibilidade com Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown()}}6{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
Redefinido de long para double{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Redefinido de long para double{{CompatChrome(56)}}{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/mouseevent/clienty/index.html b/files/pt-br/web/api/mouseevent/clienty/index.html new file mode 100644 index 0000000000..6333ab631c --- /dev/null +++ b/files/pt-br/web/api/mouseevent/clienty/index.html @@ -0,0 +1,91 @@ +--- +title: MouseEvent.clientY +slug: Web/API/MouseEvent/clientY +tags: + - API + - CSSOM View + - Eventos de DOM + - Eventos de mouse + - Propriedade + - Somente Leitura +translation_of: Web/API/MouseEvent/clientY +--- +
{{APIRef("DOM Events")}}
+ +

A propriedade clientY  da interface {{domxref("MouseEvent")}} fornece a coordenada vertical do cliente dentro da aplicacão em que o evento ocorreu (ao contrário da coordenada que pertence a página).

+ +

Por exemplo, clicando no topo da área do cliente sempre resultará num evento de mouse com um valor 0 de clientY, independente se a página está "escrollada" verticalmente.

+ +

Sintaxe

+ +
var y = instanciaDeEventoDoMouse.clientY
+
+ +

Valor de retorno

+ +

O valor retornado por essa propriedade é um valor flutuante double como foi redefinida pelo "CSSOM View Module". Originalmente esta propriedade era definida como um inteiro long. Veja a seção de compatibilidade de browsers para mais detalhes.

+ +

Exemplo

+ +

Este exemplo mostra as coordenadas do mouse quando você ativar o evento {{Event("mousemove")}}.

+ +

HTML

+ +
<p>Mova seu mouse para ver sua posicão.</p>
+<p id="screen-log"></p>
+ +

JavaScript

+ +
let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSSOM View','#dom-mouseevent-clienty', 'clientY')}}{{Spec2('CSSOM View')}}Redefine {{domxref("MouseEvent")}} de long para double.
{{SpecName('DOM3 Events','#widl-MouseEvent-clientY','MouseEvent.clientY')}}{{Spec2('DOM3 Events')}}Sem mudanças vindas de {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientY')}}{{Spec2('DOM2 Events')}}Definição inicial.
+ +

Compatibilidade de browser

+ + + +

{{Compat("api.MouseEvent.clientY")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/mouseevent/index.html b/files/pt-br/web/api/mouseevent/index.html new file mode 100644 index 0000000000..cce575dec6 --- /dev/null +++ b/files/pt-br/web/api/mouseevent/index.html @@ -0,0 +1,336 @@ +--- +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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}Rascunho de trabalhoRedefine 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() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
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.09.05.01.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() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari 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

-- cgit v1.2.3-54-g00ecf