Skip to content

Mouse events #87

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

Closed
wants to merge 2 commits into from
Closed

Mouse events #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b85068
Übersetzung
Jan 22, 2021
e3eca12
Update index.html
hack03er Jan 22, 2021
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
9 changes: 4 additions & 5 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 @@ -15,16 +15,16 @@
</head>

<body>

Click on a list item to select it.
Klicke auf einen Unterpunkt um ihn auszuwählen.
<br>

<ul id="ul">
<li>Christopher Robin</li>
<li>Winnie-the-Pooh</li>
<li>Tigger</li>
<li>Kanga</li>
<li>Rabbit. Just rabbit.</li>
<li>Hase. Einfach Hase.</li>
</ul>

<script>
Expand All @@ -38,8 +38,7 @@
}

}

// prevent unneeded selection of list elements on clicks
// verhindert unötige Auswahl der Unterpunkte beim Klicken
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,15 +16,15 @@

<body>

Click on a list item to select it.
Klicke auf einen Unterpunkt um ihn auszuwählen.
<br>

<ul id="ul">
<li>Christopher Robin</li>
<li>Winnie-the-Pooh</li>
<li>Tigger</li>
<li>Kanga</li>
<li>Rabbit. Just rabbit.</li>
<li>Hase. Einfach Hase.</li>
</ul>

<script>
Expand Down
18 changes: 7 additions & 11 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,14 @@
importance: 5

---
# Auswählbare Liste
Erstelle eine Liste mit auswählbaren Elementen, wie in Datei-Managern.
- Ein Klick auf einen Unterpunkt wählt nur ein Element aus (erstellt die Klasse `.selected`) und wählt alle anderen ab.
- Wenn ein Klick mit `key:Ctrl` (`key:Cmd` für Mac) gemacht wird, dann wird die Auswahl auf das Element geschaltet, aber die anderen Elemente werden nicht verändert.

# Selectable list

Create a list where elements are selectable, like in file-managers.

- 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.

The demo:
Die 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.

P.P.S. Prevent the native browser selection of the text on clicks.
P.S. Für diese Aufgabe können wir annehmen, dass die Unterpunkte nur aus Text bestehen. Keine eingenisteten tags.
P.P.S. Verhindere bei den Klicks die voreingestellte Browser Auswahl vom Text.
Loading