duanehutchins/index.html

## 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>
	<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>