-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMouseClick.html
66 lines (64 loc) · 1.93 KB
/
MouseClick.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mouse Click</title>
<style>
body {
font-family: Calibri;
}
.sample {
font-family: Calibri;
font-size: 20px;
font-weight: 400;
}
div {
display: -webkit-inline-flex;
height: 250px;
width: 250px;
margin: auto;
border-radius: 20px;
border: 3px solid black;
background-color: lightslategray;
}
s {
font-family: Calibri;
text-decoration: none;
color: white;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<h1>Event Handler - Mouse Click/Move</h1>
• Erstellen Sie eine HTML Seite auf der ein DIV mit einer grauen Hintergrundfarbe
als Zeichenfläche sichtbar ist. Die Zeichenfläche soll eine Höhe und Breite von
250px erhalten.<br>
• Immer wenn Sie auf dieser Fläche Ihre Maus bewegen, zeigen Sie in einem Bereich unterhalb der Fläche die Koordinaten des Mauszeigers relativ zur linken
oberen Ecke des Zeichendivs an.<br>
• Wenn Sie auf die Fläche Klicken, fügen Sie einen Eintrag zu einer Punkteliste
hinzu, die ebenfalls unterhalb der Zeichenfläche dargestellt wird.<br>
<br>
<br>
<div id="div1" onclick="add()">
<s> Zeichenfläche </s>
</div>
<br>
<br>
<h2>Maus Koordinaten</h2>
<h4>Bewege die Maus über die Zeichenfläche, um die x- und y-Koordinaten der Maus zu erhalten</h4>
<p class="sample"></p>
<script>
let sampleEle = document.querySelector(".sample");
document.body.addEventListener("mousemove", (event) => {
sampleEle.innerHTML = "X-Achse: " + event.x + " Y-Achse: " + event.y;
});
</script>
<br>
<h2>Punkteliste</h2>
<h4>Klicke auf die Zeichenfläche und füge der Liste einen (weiteren) Eintrag hinzu</h4>
<ul id="myList"></ul>
<script src="MouseClick.js"></script>
</body>
</html>