From 6da8070a2d0edbd48014ef26767bf11cae79b3af Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Wed, 1 Jul 2020 16:54:55 -0500 Subject: [PATCH 01/11] Update article.md --- .../1-mouse-events-basics/article.md | 151 +++++++++--------- 1 file changed, 76 insertions(+), 75 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 551bc564a..b3d5dc6ba 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -1,170 +1,171 @@ -# Mouse events +# Eventos del Mouse -In this chapter we'll get into more details about mouse events and their properties. +En este capítulo vamos a entrar en más detalles sobre los eventos del mouse y sus propiedades. -Please note: such events may come not only from "mouse devices", but are also from other devices, such as phones and tablets, where they are emulated for compatibility. +Ten en cuenta que tales eventos pueden provenir no sólo del "dispositivo mouse", sino también de otros dispositivos, como teléfonos y tabletas, donde se emulan por compatibilidad. -## Mouse event types +## Tipos de eventos del mouse -We've already seen some of these events: +Ya hemos visto algunos de estos eventos: `mousedown/mouseup` -: Mouse button is clicked/released over an element. +: Se oprime/suelta el botón del ratón sobre un elemento. `mouseover/mouseout` -: Mouse pointer comes over/out from an element. +: El puntero del mouse se mueve sobre/sale de un elemento. `mousemove` -: Every mouse move over an element triggers that event. +: Cualquier movimiento del mouse sobre un elemento activa el evento. `click` -: Triggers after `mousedown` and then `mouseup` over the same element if the left mouse button was used. +: Se activa después de `mousedown` y un `mouseup` enseguida sobre el mismo elemeto si se usó el botón. `dblclick` -: Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays. +: Se activa después de dos clicks seguidos sobre el mismo elemento. Hoy en día se usa raramente. `contextmenu` -: Triggers when when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it's not exactly the mouse event. +: Se activa al pulsar el botón derecho del ratón. Existen otras formas de abrir el menú contextual, por ejemplo: usando un comando especial de teclado también puede activarse, de manera que no es exactamente un evento exclusivo del mouse. -...There are several other events too, we'll cover them later. +...Existen otros eventos más que cubriremos más tarde. -## Events order +## El orden de los eventos -As you can see from the list above, a user action may trigger multiple events. +Como pudiste ver en la lista anterior, una acción del usuario puede desencadenar varios eventos. -For instance, a left-button click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released. +Por ejemlo , un click izquierdo primero activa `mousedown`cuando se presiona el botón, enseguida `mouseup` y `click` cuando se suelta. -In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`. +En casos así, el orden es fijo. Es decir, los controladores son llamados en el siguiente orden `mousedown` -> `mouseup` -> `click`. ```online -Click the button below and you'll see the events. Try double-click too. +Haz click en el botón abajo y verás los eventos. Intenta con doble click también. -On the teststand below all mouse events are logged, and if there is more than a 1 second delay between them they are separated by a horizontal ruler. +En el testeador de abajo todos los eventos quedan registrados. Si hay mas de un segundo de retraso entre cada uno de ellos quedan separados por una regla horizontal. -Also we can see the `button` property that allows to detect the mouse button, it's explained below. +Además podemos ver la propiedad de `button` que nos permite detectar el botón del mouse. Lo explicaremos a continuación. -
+
``` -## Mouse button +## El botón del mouse -Click-related events always have the `button` property, which allows to get the exact mouse button. +Los eventos relacionados con clics siempre tienen la propiedad `button`, esta nos permite conocer el boton exacto del mouse. -We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click. +Normalmente no la usamos para eventos `click` y `contextmenu` events, porque sabemos que ocurren solo con click izquierdo y derecho respectivamente. -From the other hand, `mousedown` and `mouseup` handlers we may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". +Por otro lado, con lo controloadores `mousedown` y `mouseup` vamos a necesitar `event.button` ya que estos eventos se activan con cualquier botón, por lo que `button` nos permitira distinguir entre "mousedown derecho" y "mousedown izquierdo". -The possible values of `event.button` are: +Los valores posibles para `event.button` son: -| Button state | `event.button` | +| Estado del botón | `event.button` | |--------------|----------------| -| Left button (primary) | 0 | -| Middle button (auxillary) | 1 | -| Right button (secondary) | 2 | -| X1 button (back) | 3 | -| X2 button (forward) | 4 | +| Botón izquierdo (primario) | 0 | +| Botón central (auxiliar) | 1 | +| Botón derecho (secundario) | 2 | +| Botón X1 (atrás) | 3 | +| Botón X2 (adelante) | 4 | -Most mouse devices only have the left and right buttons, so possible values are `0` or `2`. Touch devices also generate similar events when one taps on them. +La mayoría de los dispositivos de ratón sólo tienen los botones izquierdo y derecho, por lo que los valores posibles son `0` o `2`. Los dispositivos táctiles también generan eventos similares cuando se toca sobre ellos. -Also there's `event.buttons` property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons) if you ever need it. +También hay una propiedad `event.buttons` que guarda todos los botones presionados actuales en un solo entero, un bit por botón. En la práctica, esta propiedad es raramente utilizada. Puedes encontrar más detalles en [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons) si alguna vez lo necesitas. -```warn header="The outdated `event.which`" -Old code may use `event.which` property that's an old non-standard way of getting a button, with possible values: +```warn header="El obsoleto `event.which`" +El código puede utilizar la propiedad `event.which` que es una forma antigua no estándar de obtener un botón con los valores posibles: -- `event.which == 1` – left button, -- `event.which == 2` – middle button, -- `event.which == 3` – right button. +- `event.which == 1` – botón izquierdo, +- `event.which == 2` – botón central, +- `event.which == 3` – botón derecho. -As of now, `event.which` is deprecated, we shouldn't use it. +A partir de ahora `event.which` is deprecatedestá en desuso, no deberíamos usarlo. ``` -## Modifiers: shift, alt, ctrl and meta +## Modificadores: shift, alt, ctrl y meta -All mouse events include the information about pressed modifier keys. +Todos los eventos del mouse incluyen la información sobre las teclas modificadoras presionadas. -Event properties: +Propiedades del evento: - `shiftKey`: `key:Shift` -- `altKey`: `key:Alt` (or `key:Opt` for Mac) +- `altKey`: `key:Alt` (p `key:Opt` para Mac) - `ctrlKey`: `key:Ctrl` -- `metaKey`: `key:Cmd` for Mac +- `metaKey`: `key:Cmd` para Mac -They are `true` if the corresponding key was pressed during the event. +Su valor es `true` si la tecla fue presionada durante el evento. -For instance, the button below only works on `key:Alt+Shift`+click: +Por ejemplo, el botón abajo solo funciona con`key:Alt+Shift`+click: ```html autorun height=60 - + ``` -```warn header="Attention: on Mac it's usually `Cmd` instead of `Ctrl`" -On Windows and Linux there are modifier keys `key:Alt`, `key:Shift` and `key:Ctrl`. On Mac there's one more: `key:Cmd`, corresponding to the property `metaKey`. +```warn header="Atención: en Mac suele ser `Cmd` en lugar de `Ctrl`" +En Windows y Linux existen las teclas modificadoras `key:Alt`, `key:Shift` y `key:Ctrl`. En Mac hay una más: `key:Cmd`, correspondiente a la propiedad `metaKey`. -In most applications, when Windows/Linux uses `key:Ctrl`, on Mac `key:Cmd` is used. +En la mayoría de las aplicaciones, cuando Windows/Linux usan `key:Ctrl`, en Mac se usa `key:Cmd`. -That is: where a Windows user presses `key:Ctrl+Enter` or `key:Ctrl+A`, a Mac user would press `key:Cmd+Enter` or `key:Cmd+A`, and so on. +Es decir: cuando un usuario de Windows usa `key:Ctrl+Enter` o `key:Ctrl+A`, un usuario Mac presionaría `key:Cmd+Enter` o `key:Cmd+A`, y así sucesivamente. -So if we want to support combinations like `key:Ctrl`+click, then for Mac it makes sense to use `key:Cmd`+click. That's more comfortable for Mac users. +Entonces si queremos darle soporte a combinaciones como `key:Ctrl`+click, entonces para Mac tendría más sentido usar `key:Cmd`+click. Esto es más cómodo para los usuarios de Mac. -Even if we'd like to force Mac users to `key:Ctrl`+click -- that's kind of difficult. The problem is: a left-click with `key:Ctrl` is interpreted as a *right-click* on MacOS, and it generates the `contextmenu` event, not `click` like Windows/Linux. +Incluso si quisieramos obligar a los usuarios de Mac a hacer `key:Ctrl`+click -- esto supone algo de dificultad. El problema es que: un click izquierdo con `key:Ctrl` es intrepetado como *click derecho* en MacOS, y esto genera un evento `contextmenu`, no un `click` como en Windows/Linux. -So if we want users of all operating systems to feel comfortable, then together with `ctrlKey` we should check `metaKey`. +Así que si queremos que los usuarios de todos los sistemas operativos se sientan cómodos, entonces junto con `ctrlKey` debemos verificar `metaKey`. -For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`. +Para código JS signidica que debemos hacer la comprobación `if (event.ctrlKey || event.metaKey)`. ``` -```warn header="There are also mobile devices" -Keyboard combinations are good as an addition to the workflow. So that if the visitor uses a keyboard -- they work. +```warn header="También hay dispositivos móviles" +Las combinaciones de teclado son buenas como una adición al flujo de trabajo. De modo que si el visitante usa un teclado -- funcionan. + +Pero si su dispositivo no lo tiene -- entonces debería haber una manera de vivir sin teclas modificadoras. -But if their device doesn't have it -- then there should be a way to live without modifier keys. ``` -## Coordinates: clientX/Y, pageX/Y +## Coordenadas: clientX/Y, pageX/Y -All mouse events provide coordinates in two flavours: +Todos los eventos del ratón proporcionan coordenadas en dos sabores: -1. Window-relative: `clientX` and `clientY`. -2. Document-relative: `pageX` and `pageY`. +1. Relativas a la ventana: `clientX` y `clientY`. +2. Relativos al documento: `pageX` y `pageY`. -We already covered the difference between them in the chapter . +Ya cubrimos la diferencia entre ellos en el capítulo . -In short, document-relative coordinates `pageX/Y` are counted from the left-upper corner of the document, and do not change when the page is scrolled, while `clientX/Y` are counted from the current window left-upper corner. When the page is scrolled, they change. +En resumen, las coordenadas relativas al documento `pageX/Y`se cuentan desde la esquina superior izquierda del documento y no cambian cuando se desplaza la página, mientras que `clientX/Y` se cuentan desde la esquina superior actual. Cambian cuando se desplaza la página. -For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`, no matter how the page is scrolled. +Por ejemplo, si tenemos una ventana del tamaño 500x500, y el mouse está en la esquina superior izquierda, entonces `clientX` y `clientY` son `0`, sin importar cómo se desplace la página. -And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is. They are similar to `position:fixed` in that aspect. +Y si el mouse está en el centro, entonces `clientX` y `clientY` son `250`, No importa en eque parte del documento se encuentren. Esto es similar a `position:fixed` en ese aspecto. ````online -Move the mouse over the input field to see `clientX/clientY` (the example is in the `iframe`, so coordinates are relative to that `iframe`): +Mueve el mouse sobre el campo de entrada para ver `clientX/clientY` (el ejemplo está dentro del `iframe`, así que las coordenadas son relativas al `iframe`): ```html autorun height=50 - + ``` ```` -## Preventing selection on mousedown +## Prevención de selección en mousedown -Double mouse click has a side-effect that may be disturbing in some interfaces: it selects text. +El doble clic del mouse tiene un efecto secundario que puede ser molesto en algunas interfaces: selecciona texto. -For instance, a double-click on the text below selects it in addition to our handler: +Por ejemplo, un doble clic en el texto de abajo lo selecciona además de activar nuestro controlador: ```html autorun height=50 -Double-click me +Haz doble click en mi ``` -If one presses the left mouse button and, without releasing it, moves the mouse, that also makes the selection, often unwanted. +Si se pulsa el botón izquierdo del ratón y, sin soltarlo, mueve el ratón, también hace la selección, a menudo no deseado. -There are multiple ways to prevent the selection, that you can read in the chapter . +Hay varias maneras de evitar la selección, que se pueden leer en el capítulo . In this particular case the most reasonable way is to prevent the browser action on `mousedown`. It prevents both these selections: From 70d3893a6a548aae52359f6b147bedf8032942d2 Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Wed, 1 Jul 2020 18:25:31 -0500 Subject: [PATCH 02/11] Update article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Traducción completa del artículo. --- .../1-mouse-events-basics/article.md | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index b3d5dc6ba..689e335c1 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -120,7 +120,7 @@ Incluso si quisieramos obligar a los usuarios de Mac a hacer `key:Ctrl`+click -- Así que si queremos que los usuarios de todos los sistemas operativos se sientan cómodos, entonces junto con `ctrlKey` debemos verificar `metaKey`. -Para código JS signidica que debemos hacer la comprobación `if (event.ctrlKey || event.metaKey)`. +Para código JS significa que debemos hacer la comprobación `if (event.ctrlKey || event.metaKey)`. ``` ```warn header="También hay dispositivos móviles" @@ -153,7 +153,7 @@ Mueve el mouse sobre el campo de entrada para ver `clientX/clientY` (el ejemplo ``` ```` -## Prevención de selección en mousedown +## Previniendo la selección en mousedown El doble clic del mouse tiene un efecto secundario que puede ser molesto en algunas interfaces: selecciona texto. @@ -167,46 +167,46 @@ Si se pulsa el botón izquierdo del ratón y, sin soltarlo, mueve el ratón, tam Hay varias maneras de evitar la selección, que se pueden leer en el capítulo . -In this particular case the most reasonable way is to prevent the browser action on `mousedown`. It prevents both these selections: +En este caso particular, la forma más razonable es evitar la acción del navegador `mousedown`. Esto evita ambas selecciones: ```html autorun height=50 -Before... +Antes... - Double-click me + Haz doble click en mí -...After +...Después ``` -Now the bold element is not selected on double clicks, and pressing the left button on it won't start the selection. +Ahora el elemento en negrita no se selecciona con doble clic, y al mantener presionado el botón izquierdo y arrastrar no se iniciará la selección. -Please note: the text inside it is still selectable. However, the selection should start not on the text itself, but before or after it. Usually that's fine for users. +Tenga en cuenta: el texto dentro de él todavía es seleccionable. Sin embargo, la selección no debe comenzar en el texto en sí, sino antes o después. Por lo general, eso está bien para los usuarios. -````smart header="Preventing copying" -If we want to disable selection to protect our page content from copy-pasting, then we can use another event: `oncopy`. +````smart header="Previniendo copias" +Si queremos inhabilitar la selección para proteger nuestro contenido de la página del copy-paste, entonces podemos utilizar otro evento: `oncopy`. ```html autorun height=80 no-beautify -
- Dear user, - The copying is forbidden for you. - If you know JS or HTML, then you can get everything from the page source though. +
+ Querido usuario, + El copiado está prohibida para ti. + Si sabes JS o HTML entonces puedes obtener todo de la fuente de la página.
``` -If you try to copy a piece of text in the `
`, that won't work, because the default action `oncopy` is prevented. +Si intenta copiar un fragmento de texto en el `
` no va a funcionar porque la acción default de `oncopy` fue evitada. -Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone knows how to do it. +Seguramente el usuario tiene acceso a la fuente HTML de la página, y puede tomar el contenido desde allí, pero no todos saben cómo hacerlo. ```` -## Summary +## Resumen -Mouse events have the following properties: +Los eventos del mouse tienen las siguientes propiedades: -- Button: `button`. -- Modifier keys (`true` if pressed): `altKey`, `ctrlKey`, `shiftKey` and `metaKey` (Mac). - - If you want to handle `key:Ctrl`, then don't forget Mac users, they usually use `key:Cmd`, so it's better to check `if (e.metaKey || e.ctrlKey)`. +- Botón: `button`. +- Teclas modificadoras (`true` si fueron presionadas): `altKey`, `ctrlKey`, `shiftKey` y `metaKey` (Mac). + - Si quieres controlar las acciones de la tecla `key:Ctrl` no te olvides de los usuarios de Mac que generalmente usan `key:Cmd`, de manera que es mejor ferificar con la condicional: `if (e.metaKey || e.ctrlKey)`. -- Window-relative coordinates: `clientX/clientY`. -- Document-relative coordinates: `pageX/pageY`. +- Coordenadas relativas a la ventana: `clientX/clientY`. +- Coordenadas relativas al documento: `pageX/pageY`. -The default browser action of `mousedown` is text selection, if it's not good for the interface, then it should be prevented. +La acción predeterminada del navegador `mousedown` es la selección del texto, si no es bueno para la interfaz, entonces debe evitarse. -In the next chapter we'll see more details about events that follow pointer movement and how to track element changes under it. +En el próximo capítulo veremos más detalles sobre los eventos que siguen al movimiento del puntero y cómo rastrear los cambios de elementos debajo de él. From a171e8208f03a5bacc19ff13e269f4baaefc9a10 Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Wed, 1 Jul 2020 18:34:08 -0500 Subject: [PATCH 03/11] Update task.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Traducción completa de las tareas --- .../01-selectable-list/task.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md index 8d29134ff..1931b7aa2 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md +++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md @@ -1,18 +1,18 @@ -importance: 5 +importancia: 5 --- -# Selectable list +# Lista seleccionable -Create a list where elements are selectable, like in file-managers. +Cree una lista donde los elementos son seleccionables, como en los administradores de archivos. -- A click on a list element selects only that element (adds the class `.selected`), deselects all others. -- If a click is made with `key:Ctrl` (`key:Cmd` for Mac), then the selection is toggled on the element, but other elements are not modified. +- Un clic en un elemento de la lista selecciona solo ese elemento (agrega la clase `.selected`), deselecciona todos los demás. +- Si se hace un clic con `key:Ctrl` (`key:Cmd` para Mac), la selección se activa junto con el elemento, pero otros elementos no se modifican. -The demo: +Demo: [iframe border="1" src="solution" height=180] -P.S. For this task we can assume that list items are text-only. No nested tags. +PD: Para esta tarea, podemos suponer que los elementos de la lista son solo de texto. No hay etiquetas anidadas. -P.P.S. Prevent the native browser selection of the text on clicks. +PPD: Evita la selección nativa del navegador del texto en los clics. From 4ad8633a46721b1db5957f1e4e9c130ccd8352e3 Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Wed, 1 Jul 2020 18:37:19 -0500 Subject: [PATCH 04/11] Update index.html --- .../01-selectable-list/source.view/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html index e18d4a994..fb158c563 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html +++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html @@ -16,7 +16,7 @@ - Click on a list item to select it. + Haz click en un elemento de la lista para seleccionarlo.
    @@ -28,7 +28,7 @@
From 579938af3ca5e985d1f1ff9077c57699172e3e2f Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Wed, 1 Jul 2020 18:39:13 -0500 Subject: [PATCH 05/11] Update index.html --- .../01-selectable-list/solution.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html index 4d1e2ea93..983c0c07c 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html +++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html @@ -16,7 +16,7 @@ - Click on a list item to select it. + Haz click en un elemento de la lista para seleccionarlo
    From d4f3086138ab850f5635801b0fe2fa4cb6a9a74e Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Wed, 1 Jul 2020 21:13:06 -0500 Subject: [PATCH 06/11] Update index.html --- .../01-selectable-list/solution.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html index 983c0c07c..382800435 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html +++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html @@ -39,7 +39,7 @@ } - // prevent unneeded selection of list elements on clicks + // evitando la selección innecesaria de elementos de la lista en los clics ul.onmousedown = function() { return false; }; From bce4c76e9b001b81a15bd230940a49802100d8c4 Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Mon, 6 Jul 2020 17:38:39 -0500 Subject: [PATCH 07/11] Update 2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md Co-authored-by: joaquinelio --- .../1-mouse-events-basics/01-selectable-list/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md index 1931b7aa2..1045c9c05 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md +++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md @@ -7,7 +7,7 @@ importancia: 5 Cree una lista donde los elementos son seleccionables, como en los administradores de archivos. - Un clic en un elemento de la lista selecciona solo ese elemento (agrega la clase `.selected`), deselecciona todos los demás. -- Si se hace un clic con `key:Ctrl` (`key:Cmd` para Mac), la selección se activa junto con el elemento, pero otros elementos no se modifican. +- Si se hace un clic con `key:Ctrl` (`key:Cmd` para Mac), el estado seleccionado/deseleccionado cambia para ese solo elemento, los otros elementos no se modifican. Demo: From aef65d9b2fa0aa6ecb1b738219f4cd44ab562ada Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Mon, 6 Jul 2020 17:38:58 -0500 Subject: [PATCH 08/11] Update 2-ui/3-event-details/1-mouse-events-basics/article.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/1-mouse-events-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 689e335c1..b2f561328 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -48,7 +48,7 @@ Además podemos ver la propiedad de `button` que nos permite detectar el botón ## El botón del mouse -Los eventos relacionados con clics siempre tienen la propiedad `button`, esta nos permite conocer el boton exacto del mouse. +Los eventos relacionados con clics siempre tienen la propiedad `button`, esta nos permite conocer el botón exacto del mouse. Normalmente no la usamos para eventos `click` y `contextmenu` events, porque sabemos que ocurren solo con click izquierdo y derecho respectivamente. From 0b3b8885cf809a6ff197d709341c5d8cf95adaa9 Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Mon, 6 Jul 2020 17:42:15 -0500 Subject: [PATCH 09/11] Update 2-ui/3-event-details/1-mouse-events-basics/article.md --- 2-ui/3-event-details/1-mouse-events-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index b2f561328..133e22e41 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -75,7 +75,7 @@ El código puede utilizar la propiedad `event.which` que es una forma antigua no - `event.which == 2` – botón central, - `event.which == 3` – botón derecho. -A partir de ahora `event.which` is deprecatedestá en desuso, no deberíamos usarlo. +Ahora `event.which` está en desuso, no deberíamos usarlo. ``` ## Modificadores: shift, alt, ctrl y meta From 09ce83405eff3ce70a8aa9b1fc10a053e13bb36f Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Mon, 6 Jul 2020 17:42:40 -0500 Subject: [PATCH 10/11] Update 2-ui/3-event-details/1-mouse-events-basics/article.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/1-mouse-events-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 133e22e41..d15ef6a91 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -18,7 +18,7 @@ Ya hemos visto algunos de estos eventos: : Cualquier movimiento del mouse sobre un elemento activa el evento. `click` -: Se activa después de `mousedown` y un `mouseup` enseguida sobre el mismo elemeto si se usó el botón. +: Se activa después de `mousedown` y un `mouseup` enseguida sobre el mismo elemento si se usó el botón. `dblclick` : Se activa después de dos clicks seguidos sobre el mismo elemento. Hoy en día se usa raramente. From 3432d9812792f06c6b3eb14561ba247bed735c9a Mon Sep 17 00:00:00 2001 From: Maksumi Murakami Date: Mon, 6 Jul 2020 17:42:51 -0500 Subject: [PATCH 11/11] Update 2-ui/3-event-details/1-mouse-events-basics/article.md Co-authored-by: joaquinelio --- 2-ui/3-event-details/1-mouse-events-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index d15ef6a91..0e3b9ca2e 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -143,7 +143,7 @@ En resumen, las coordenadas relativas al documento `pageX/Y`se cuentan desde la Por ejemplo, si tenemos una ventana del tamaño 500x500, y el mouse está en la esquina superior izquierda, entonces `clientX` y `clientY` son `0`, sin importar cómo se desplace la página. -Y si el mouse está en el centro, entonces `clientX` y `clientY` son `250`, No importa en eque parte del documento se encuentren. Esto es similar a `position:fixed` en ese aspecto. +Y si el mouse está en el centro, entonces `clientX` y `clientY` son `250`, No importa en qué parte del documento se encuentren. Esto es similar a `position:fixed` en ese aspecto. ````online Mueve el mouse sobre el campo de entrada para ver `clientX/clientY` (el ejemplo está dentro del `iframe`, así que las coordenadas son relativas al `iframe`):