mouse event obj

by uto usui

HTML

<div id="wrap" class="wrap">
  <div id="box" class="box"></div>
</div>

CSS

body {
  border: 10px solid gray;
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 300px;
  height: 300px;
  background-color: lightblue;
}

JavaScript

const box = document.getElementById('box')
const wrap = document.getElementById('wrap')


const addText = (e) => {

  const rect = e.currentTarget.getBoundingClientRect();
  const targetX = e.clientX - rect.left;

	box.innerHTML = `
  	<p>element - ${e.offsetX}</p>
    <p>window  - ${e.clientX}</p>
    <p>page    - ${e.pageX}</p>
    <p>display - ${e.screenX}</p>
    <p>target  - ${targetX}</p>`
}

const onMouseMove = e => addText(e)

wrap.addEventListener('mousemove', onMouseMove)