Beispiel:JS-eventhandler-onmouseout.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
#buehne {
background-color: #337599;
padding: 50px;
height:80vh;
color: gold;
cursor: crosshair;
}
p span {
display:inline-block;
width:1.8em;
text-align:right;
}
</style> <title>mouseout</title>
</head>
<body>
mouseout Event-Handler
<main id="buehne" onmousemove="HoleKoordinaten(event)">
Dieses main-Element hat einen mousemove-EventHandler, der die Position der Maus innerhalb des Elements anzeigt.
Wenn du die blaue Bühne verlässt, löscht mouseout die Koordinaten.
X: px Y: px
</main>
<script>
var elem = document.getElementById('buehne');
elem.addEventListener('mouseout', LoescheKoordinaten);
function HoleKoordinaten(e) {
x = e.clientX;
y = e.clientY;
document.getElementById('x').innerHTML = x;
document.getElementById('y').innerHTML = y;
}
function LoescheKoordinaten() {
document.getElementById('x').innerHTML = ;
document.getElementById('y').innerHTML = ;
}
</script>
</body> </html>
