Skip to content

Mouse events #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Jul 7, 2020
Merged

Mouse events #290

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6da8070
Update article.md
Jul 1, 2020
70d3893
Update article.md
Jul 1, 2020
a171e82
Update task.md
Jul 1, 2020
4ad8633
Update index.html
Jul 1, 2020
579938a
Update index.html
Jul 1, 2020
d4f3086
Update index.html
Jul 2, 2020
bce4c76
Update 2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/…
Jul 6, 2020
aef65d9
Update 2-ui/3-event-details/1-mouse-events-basics/article.md
Jul 6, 2020
0b3b888
Update 2-ui/3-event-details/1-mouse-events-basics/article.md
Jul 6, 2020
09ce834
Update 2-ui/3-event-details/1-mouse-events-basics/article.md
Jul 6, 2020
3432d98
Update 2-ui/3-event-details/1-mouse-events-basics/article.md
Jul 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions 2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body>

Click on a list item to select it.
Haz click en un elemento de la lista para seleccionarlo
<br>

<ul id="ul">
Expand All @@ -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;
};
Expand Down
4 changes: 2 additions & 2 deletions 2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

<body>

Click on a list item to select it.
Haz click en un elemento de la lista para seleccionarlo.
<br>

<ul id="ul">
Expand All @@ -28,7 +28,7 @@
</ul>

<script>
// ...your code...
//...Tu código
</script>

</body>
Expand Down
16 changes: 8 additions & 8 deletions 2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Loading