Skip to content

Instantly share code, notes, and snippets.

@duanehutchins

duanehutchins/index.html

Last active January 11, 2022 20:04
Show Gist options
  • Save duanehutchins/5fb4854a612954692a08930579ada18e to your computer and use it in GitHub Desktop.
Save duanehutchins/5fb4854a612954692a08930579ada18e to your computer and use it in GitHub Desktop.
Download ZIP
chrome mouseout test
Raw
index.html
<html>
<body>
<div id="mousecapture">
Mouse over the top, and watch the position change below:<br>
<p id="position">
position: X,Y
</p>
<br>
Then select an option and try the same again:
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
<p>
When using Chrome on MacOS, the position doesn't update while an option is selected and has focus.<br>
This does work in Safari as well as Chrome on Windows.
It also works if the content is in an iframe, even on Chrome MacOS.
</p>
</div>
</body>
<style>
#mousecapture {
width: 100%;
height: 10em;
background-color: grey;
padding: 1em;
}
</style>
<script type="text/javascript">
var mousecapture = document.getElementById('mousecapture');
var positionElem = document.getElementById('position');
function onMouseMove (e) {
var toElement = e.toElement;
var relatedTarget = e.relatedTarget;
// console.log(`to: ${toElement}, relatedTarget: ${related}, nodeName: ${this.nodeName}`);
if (toElement || relatedTarget) return;
positionElem.innerText = `position: ${e.pageX},${e.pageY}`;
}
document.body.addEventListener('mouseout', onMouseMove);
document.querySelector('html').addEventListener('mouseout', onMouseMove);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment