JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<h2>
偵測滑鼠位置
</h2>
<img id="img" src="https://children.moc.gov.tw/resource/graffiti_image/677617.png" onerror="this.src='https://i0.wp.com/learn.onemonth.com/wp-content/uploads/2017/08/1-10.png?w=845&ssl=1'">

<div id = 'x'></div>
<div id = 'y'></div>

JavaScript

var img = document.querySelector('#img');

img.addEventListener('mouseenter', function (e) {
  document.getElementById('x').textContent = e.screenX;
  document.getElementById('y').textContent = e.screenY;
}, false);

img.addEventListener('mousemove', function (e) {
  document.getElementById('x').textContent = e.screenX;
  document.getElementById('y').textContent = e.screenY;
}, false);

img.addEventListener('mouseleave', function (e) {
  document.getElementById('x').textContent = e.screenX;
  document.getElementById('y').textContent = e.screenY;
}, false);