0

I have an HTML page and I want to get the position of the mouse. I do this :

document.onclick = function(click) {
if (click.clientX<340){
    myControl.inputs.selection = false;
    btnRotate.remove();
    btnMove.remove();
    clicked = false;
}
 console.log("Coordonnee point X="+click.clientX+" Y="+click.clientY)
};

But I have an Iframe and when I click on it, I don't get the position. Do you have an idea ? Thank you

Raffy
  • 3
  • 2
  • You’d need to keep the iframe from receiving clicks happening above it. Either by placing an element of the parent document _over_ the iframe, or by setting `pointer-events: none` for the iframe (not sure if the latter works.) Of course you will likely not be able to interact with the iframe content any more. Whether that’s something you want, is unclear from your problem description so far. – CBroe May 05 '21 at 09:12
  • Thank you but I need to interact with the iframe, as a result i can't use this solution. – Raffy May 05 '21 at 09:17
  • 1
    Is this the answer to your question?https://stackoverflow.com/questions/7790725/javascript-track-mouse-position – Erfan Bahramali May 05 '21 at 09:22
  • Perhaps you could get the click location inside the iframe, maybe like [this question](https://stackoverflow.com/questions/10071431/apply-onclick-to-iframe/44389097), and then add that to the location of the iframe. – bluevulture May 05 '21 at 09:25
  • Does this answer your question? [Javascript - Track mouse position](https://stackoverflow.com/questions/7790725/javascript-track-mouse-position) – Masood May 05 '21 at 09:40
  • Thank you to all of you I'll check that – Raffy May 05 '21 at 09:44
  • It doesn't work on iframe though – Raffy May 05 '21 at 09:55

1 Answers1

1

Here I am using Host listener (mousemove) for getting mouse position in the document with JavaScript as below:

document.addEventListener('mousemove', (event) => { console.log(Mouse X: ${event.clientX}, Mouse Y: ${event.clientY}); });

FOR IFRAME:-----

Add id to the Iframe and Get it to add mousemove listener and get coords from event. it will work for you.

let iframeElement = document.getElementById('iframe');

iframeElement.contentDocument.body.addEventListener('mousemove', (e) => { document.getElementById('coord').innerHTML = x:${e.clientX} y:${e.clientY} });

Code snippet: HTML/JS Code for absolute mouse position in iframe

Regards, Nisha

Nisha Patel
  • 24
  • 3