mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
56 lines
1.7 KiB
HTML
56 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Mouse Events Order 1</title>
|
|
<meta name="specification" content="https://w3c.github.io/uievents/#events-mouseevent-event-order">
|
|
<style>
|
|
.box {
|
|
width: 16ex;
|
|
height: 16ex;
|
|
padding: 1ex;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
position: absolute;
|
|
}
|
|
|
|
.blue {
|
|
background: #99DDFF;
|
|
}
|
|
|
|
.green {
|
|
left: 22ex;
|
|
background: #44BB99;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<p><strong>Description:</strong> Tests the order of mouse events when a pointing device transitions from a
|
|
visible element A to another visible element B.</p>
|
|
|
|
<div id="box-1" class="box blue">A</div>
|
|
<div id="box-2" class="box green">B</div>
|
|
|
|
<script>
|
|
function print(label, message) {
|
|
console.log(`${label}: ${message}`);
|
|
}
|
|
|
|
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>
|