Mouse hover and exit events

Attempting to repro flutter/flutter/issues/96197 in vanilla JS.

by David Iglesias

HTML

<div id="mouse_sensor">
<p>
You have entered or exited this box this many times:
</p>
<ul>
<li><span id="num_entries">0</span> Entries</li>
<li><span id="num_exits">0</span> Exits</li>
</ul>
<p>
The cursor is here: (<span id="cursor_pos"></span>)
</p>
</div>

CSS

* { box-sizing: border-box; font-family: sans-serif; }
html, body { height: 100%; overflow: hidden; }

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#mouse_sensor {
  background: #09f;
  width: 320px;
  height: 200px;
  padding: 10px;
}

span {
  font-weight: bold;
}

JavaScript

let enters = 0;
let exits = 0;
let pos = ["?","?"];

let sensor = document.querySelector("#mouse_sensor");
let num_entries = document.querySelector("#num_entries");
let num_exits = document.querySelector("#num_exits");
let cursor_pos = document.querySelector("#cursor_pos");

function repaint() {
	num_entries.innerText = enters;
  num_exits.innerText = exits;
  cursor_pos.innerText = pos;
}

sensor.addEventListener("mouseenter", (evt) => {
	enters++;
  repaint();
});

sensor.addEventListener("mousemove", (evt) => {
  pos = [evt.offsetX, evt.offsetY];
  repaint();
});

sensor.addEventListener("mouseleave", (evt) => {
	exits++;
  repaint();
});

repaint();