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
|
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Order 2</title>
<meta name="specification" content="https://w3c.github.io/uievents/#events-mouseevent-event-order">
<style>
.box {
width: 16ex;
height: 16ex;
color: white;
font-weight: bold;
text-align: right;
padding: 1ex;
position: absolute;
}
.blue {
background: #99DDFF;
}
.green {
width: 10ex;
height: 10ex;
left: 3ex;
top: 3ex;
background: #44BB99;
}
</style>
</head>
<body>
<p><strong>Description:</strong> Tests the order of mouse events when a pointing device is moved into an element A,
and then into a nested element B and then back out again.</p>
<div id="box-1" class="box blue">A
<div id="box-2" class="box green">B</div>
</div>
<script>
function print(label, msg) {
console.log(`${label}: ${msg}`);
}
function handleMouseEvents(element, label) {
element.addEventListener("mouseup", _ => print(label, "mouseup"));
element.addEventListener("mousedown", _ => print(label, "mousedown"));
element.addEventListener("mouseenter", _ => print(label, "mouseenter"));
element.addEventListener("mouseleave", _ => print(label, "mouseleave"));
element.addEventListener("mousemove", _ => print(label, "mousemove"));
element.addEventListener("mouseout", _ => print(label, "mouseout"));
element.addEventListener("mouseover", _ => print(label, "mouseover"));
}
handleMouseEvents(document.getElementById("box-1"), "A");
handleMouseEvents(document.getElementById("box-2"), "B");
</script>
</body>
</html>
|
