From 2d67ce927bfd98fe4cd02d11c950b960945638b5 Mon Sep 17 00:00:00 2001 From: Alexander Date: Fri, 18 Mar 2022 11:14:53 -0600 Subject: fix #3994 Event: wheel. update and md [es] (#4504) --- files/es/web/api/element/wheel_event/index.html | 200 ------------------------ files/es/web/api/element/wheel_event/index.md | 106 +++++++++++++ 2 files changed, 106 insertions(+), 200 deletions(-) delete mode 100644 files/es/web/api/element/wheel_event/index.html create mode 100644 files/es/web/api/element/wheel_event/index.md diff --git a/files/es/web/api/element/wheel_event/index.html b/files/es/web/api/element/wheel_event/index.html deleted file mode 100644 index 1e2d01631d..0000000000 --- a/files/es/web/api/element/wheel_event/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: wheel -slug: Web/API/Element/wheel_event -tags: - - eventos -translation_of: Web/API/Element/wheel_event ---- -

El evento "wheel" se dispara cuando la ruleta de un dispositivo (usualmente un ratón) gira. Este evento reemplaza al ahora obsoleto evento {{event("mousewheel")}}.

- -

Información general

- -
-
Interfaz
-
{{domxref("WheelEvent")}}
-
Sincronía
-
asíncrono
-
Bubble
-
Si
-
Cancelable
-
Si
-
Target
-
defaultView, Document, Element
-
Acción predet.
-
Scroll, atras/adelante (historial), o zoom.
-
- -

Propiedades

- -

Este evento implementa las propiedades de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

- -

Propiedades de WheelEvent

- -

{{page("/en-US/docs/Web/API/WheelEvent", "Properties")}}

- -

Propiedades de MouseEvent

- -

{{page("/en-US/docs/Web/API/MouseEvent", "Properties")}}

- -

Propiedades UIEvent

- -

{{page("/en-US/docs/Web/API/UIEvent", "Properties")}}

- -

Propiedades Event

- -

{{page("/en-US/docs/Web/API/Event", "Properties")}}

- -

Métodos

- -

Este evento implementa los métodos de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

- -

Métodos de WheelEvent

- -

{{page("/en-US/docs/Web/API/WheelEvent", "Methods")}}

- -

Métodos de MouseEvent

- -

{{page("/en-US/docs/Web/API/MouseEvent", "Methods")}}

- -

Métodos de UIEvent

- -

{{page("/en-US/docs/Web/API/UIEvent", "Methods")}}

- -

Métodos de Event

- -

{{page("/en-US/docs/Web/API/Event", "Methods")}}

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM3 Events','DOM3-Events.html#event-type-wheel','wheel')}}{{Spec2('DOM3 Events')}}Definición inicial.
- -

Compatibilidad

- -{{Compat("api.Element.wheel_event")}} - -

Notas para Gecko

- -

Orden de los eventos en eventos antiguos

- -

Si el evento wheel no ha sido implementado, los eventos DOMMouseScroll y MozMousePixelScroll se usarán para dar retrocompativilidad. Sus atributos se calculan dependiendo del delta del evento wheel y el padre más cercano. Si el evento wheel o alguno de los anteriores invoca {{ domxref("event.preventDefault()") }}, no ocurrirá nada.

- -

El orden de ejecución del evento es:

- -
    -
  1. Eventos wheel en grupo de eventos por defecto (aplicaciones web y add-ons pueden manejar los eventos de este grupo)
    2. -
  2. Un evento DOMMouseScroll vertical en caso de que el deltaY, en consecutivas llamadas del evento se vuelva mayor que 1.0 o menor que -1.0
    3. -
  3. Un evento MozMousePixelScroll vertical en caso de que el deltaY del último evento wheel no sea igual a cero
    4. -
  4. Un evento DOMMouseScroll horizontal en caso de que el deltaX acumule un valor mayor que 1.0 o menor que -1.0
    5. -
  5. Un evento MozMousePixelScroll horizontal en caso de que el deltaX del último evento no sea igual que cero
    6. -
  6. Un evento wheel en el grupo de sistema (Solamente add-ons pueden gestionar este grupo de eventos)
    7. -
- -


- ¿Qué ocurre si preventDefault() es llamado?

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
wheel (grupo por defecto de evetos)Se llama preventDefault()    
DOMMouseScroll (Vertical)No se llamaSe llama preventDefault()   
MozMousePixelScroll (Vertical)No se llamadefaultPrevented devuelve trueSe llama preventDefault()  
DOMMouseScroll (Horizontal)No se llamaNo se ve afectadoNo se ve afectadoSe llama preventDefault() 
MozMousePixelScroll (Horizontal)No se llamaNo se ve afectadoNo se ve afectadodefaultPrevented devuelve trueSe llama preventDefault()
wheel (grupo de eventos de sistema)defaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve true
- -

En caso de que un Add-on necesite conocer si uno de los eventos legacy es usado por contenidos del DOM puede usar el evento wheel de #6. Lee la documentación de nsIEventListenerService para mayor detalle acerca del grupo de eventos de sistema.

- -

Los valores delta y las acciones por defecto de eventos predefinidos pueden ser personalizados en las preferencias de usuario (details). Por lo tanto, no se debe presuponer que alguna acción en concreto va a ocurrir tras recibir este evento.

- -

Valores delta

- -

Los valores delta no indican la cantidad de scroll actual de manera predeterminada. Si el usuario presiona alguna tecla mdificadora mientras mueve la rueda de scroll, dicha acción puede causar otra totalmente diferente a la esperada, como ir adelante o atras por el historial o hacer zoom. Además, incluso cuando la acción sea la esperada, el elemento que la recibe puede ser distinto al deseado.
- El objetivo del evento wheel solo está definido por la posición del cursor en el momento que se dispara este.

- -

El valor de deltaMode

- -

En Windows, los siguientes 3 eventos nativos del DOM causan eventos wheel.

- -
-
WM_MOUSEWHEEL (Evento wheel vertical del ratón)
-
El deltaMode puede ser DOM_DELTA_LINE o DOM_DELTA_PAGE. Depende de las preferencias de usuario en Windows (Para configuraciones por defecto, debería ser DOM_DELTA_LINE).
-
WM_MOUSEHWHEEL (Evento wheel horizontal del ratón)
-
EldeltaMode puede ser DOM_DELTA_LINE o DOM_DELTA_PAGE. Sin embargo, ni la configuración de velocidad de rueda de ratón de Windows ni ningún UI similar de drivers permite modificar el scroll de páginas. De modo que, normalmente este valor es DOM_DELTA_LINE.
-
WM_GESTURE (Solo utilizado en navegación gestual)
-
El deltaMode es siempre DOM_DELTA_PIXEL. Pero la mayoría de dispositivos táctiles de portatiles emulan la rueda de ratón en lugar de usar este evento. Este evento es usado típicamente en Tablet PC.
-
- -

En Mac, el valor de deltaMode depende del dispositivo. Si el dispositivo permite alta resolución, el scroll se hará en pixels, de manera que el valor del deltaMode será DOM_DELTA_PIXEL. De todos modos, el usuario puede cambiarlo a DOM_DELTA_LINE con la preferencia "mousewheel.enable_pixel_scrolling".  Si el dispositivo no soporta alta resolución, es siembre DOM_DELTA_LINE.

- -

En otras plataformas, el valor de deltaMode es siempre DOM_DELTA_LINE.

- -

Eventos no confiables

- -

Los eventos wheel no nativos nunca causarán acción por defecto.

- -

Ver también

- - diff --git a/files/es/web/api/element/wheel_event/index.md b/files/es/web/api/element/wheel_event/index.md new file mode 100644 index 0000000000..cc74d12c37 --- /dev/null +++ b/files/es/web/api/element/wheel_event/index.md @@ -0,0 +1,106 @@ +--- +title: 'Element: wheel event' +slug: Web/API/Element/wheel_event +translation_of: Web/API/Element/wheel_event +original_slug: Web/API/Element/wheel_event +browser-compat: api.Element.wheel_event +--- +{{APIRef}} + +El evento **`wheel`** se activa cuando el usuario gira un botón de rueda en un dispositivo señalador (normalmente un ratón). + +Este evento reemplaza el evento obsoleto no estándar {{domxref("Element/mousewheel_event", "mousewheel")}}. + + + + + + + + + + + + + + + + + + + + +
BurbujasSí
CancelableSí
Interfaz{{domxref("WheelEvent")}}
Propiedades del manejador de eventos + {{domxref("GlobalEventHandlers.onwheel", "onwheel")}} +
+ +> **Nota:** No confundir el evento `wheel` con el evento {{domxref("Element/scroll_event", "scroll")}}. La acción predeterminada de un evento `wheel` es específica de la implementación y no necesariamente envía un evento `scroll`. Incluso cuando lo hace, los valores `delta*` en el evento `wheel` no reflejan necesariamente la dirección de desplazamiento del contenido. Por lo tanto, no confíe en las propiedades `delta*` del evento `wheel` para obtener la dirección de desplazamiento. En su lugar, detecte los cambios de valor de {{domxref("Element.scrollLeft", "scrollLeft")}} y {{domxref("Element.scrollTop", "scrollTop")}} del objetivo en el evento `scroll`. + +## Ejemplos + +### Escalar un elemento a través de la rueda + +Este ejemplo muestra cómo escalar un elemento usando la rueda del mouse (u otro dispositivo señalador). + +```html +
Escálame con la rueda de tu ratón.
+``` + +```css +body { + min-height: 100vh; + margin: 0; + display: flex; + align-items: center; + justify-content: center; +} + +div { + width: 105px; + height: 105px; + background: #cdf; + padding: 5px; +} +``` + +```js +function zoom(event) { + event.preventDefault(); + + scale += event.deltaY * -0.01; + + // Restricción de escala + scale = Math.min(Math.max(.125, scale), 4); + + // Aplicar transformación de escala + el.style.transform = `scale(${scale})`; +} + +let scale = 1; +const el = document.querySelector('div'); +el.onwheel = zoom; +``` + +{{EmbedLiveSample("Scaling_an_element_via_the_wheel", 700, 300)}} + +### Equivalente en addEventListener + +El manejador de eventos también se puede configurar mediante el método {{domxref("EventTarget/addEventListener", "addEventListener()")}}: + +```js +el.addEventListener('wheel', zoom); +``` + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{domxref("WheelEvent")}} +- [Document: `wheel` event](/es/docs/Web/API/Document/wheel_event) + -- cgit v1.2.3-54-g00ecf