how frequently does the letter x appear in:
q: узнать координаты мыши относительно блока столкнулся с такой проблемой: надо получить координаты мыши относительно блока, на котором она находится.


const div = document.queryselector(div);

div.addeventlistener(mousemove, (e) => {
  let x = e.clientx,
    y = e.clienty;
  console.log(`${x}:${y}`);
}, {
  capture: true
})
div {
  border: 2px solid #000;
  width: 500px;
  height: 500px;
}
<div>daw</div>


пытался так, но понятно дело, что не получилось.





a: чтобы получить координаты внутри элемента, нужно из абсолютных координат мыши (pagey, pagex) вычесть смещение самого элемента. получить его можно с помощью методов .offsetleft и .offsettop


let div = document.queryselector(#f);

div.addeventlistener(mousemove, (e) => {
  let x = e.pagex,
    y = e.pagey;

  console.log(`${x - div.offsetleft}:${y-div.offsettop}`);
}, {
  capture: true
})
div#a {
  margin-top: 100px;
  padding-top: 100px;
  border: 2px solid #0f0;
}

div#f {
  border: 2px solid #000;
  width: 500px;
  height: 500px;
}
<div id=a>
  <div id=f>daw</div>
</div>



a: вариант на getboundingclientrect и event.clientx, который не зависит от relative.
offsetleft считается от ближайшего предка с position relative.
у clientx и pagex разное поведение при скроле.


<!doctype html>
<html lang=ru>
<head>
<meta charset=utf-8>
<title> позиция мыши </title>
<style>

div#a {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 350px;
  height: 350px;
  border: 2px solid #0f0;
}
div#b {
  position: relative;
}
div#f {
  border: 2px solid #000;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 250px;
  height: 250px;
  cursor: pointer;
}

</style>
</head>
<body>
<div id=a><div id=b><div id=f>0</div></div></div>
<script>

const div = document.queryselector(#f);
window.addeventlistener(mousemove, (ev) => {
  const rect = div.getboundingclientrect()
  console.log(` + ${ev.clientx - rect.left}:${ev.clienty - rect.top}    ----------    ${ev.pagex - div.offsetleft}:${ev.pagey - div.offsettop}`);
}, {
  capture: true
})

</script>
</body>
</html>



a: document.queryselector(.class).addeventlistener(mousemove,e=>console.log([e.toelement,e.offsetx])) // console.log
document.queryselector(.class).addeventlistener(mousemove,e=>{e.toelement.classname == document.queryselector(.class).classname ? console.log(e.offsetx) : false})

user
In the text, there are thirty-three "x"s.
assistant