Click event not properly displaying files XY cordinates using JavaScript/jQuery

Question

I am trying to display XY coordinates of a PDF file when clicked.

I have referenced a solution found source but still having some issues below

I have two issues:

The code below partly works as it will sometime shows X Y values coordinates when Clicked. Other times it will not work as it will only show X and Y as 0 0 respectively.
The click event only work once. If you try to click the PDF file again no value will be showed unless you refresh the page again. How do I make the click event to show coordinates values each time the PDF file is clicked.

Here is the code:

$(document).ready(function() { 
    var mouse = {x: 0, y: 0};
document.addEventListener('mousemove', function(e){ 
    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY 
}, false);
    $(window).blur( function(e){
        console.log("clicked on iframe")
      console.log('X: '+ mouse.x);
      console.log('Y: '+ mouse.y);
});
   $(document).on('mousedown', function(evt) {
      console.log('X: '+ evt.pageX);
      console.log('Y: '+ evt.pageY);
   });
});

Html

<iframe src="test.pdf"  width="500" height="900"></iframe>

Remember that the content of the iFrame will have it's own DOM. Your event callbacks will only be effective for the elements in this page and not in the content of the iFrame. — Twisty, Jul 15 '21 at 23:03
Please see: https://stackoverflow.com/questions/13439303/detect-click-event-inside-iframe — Twisty, Jul 15 '21 at 23:04

Joundill · Answer 1 · 2021-07-15T23:08:50.657

0

An answer to the question you reference answers part of your question. It's only possible to detect the first click which focuses the <iframe>.

You need to run the code inside your <iframe>, or you won't be able to do what you want.

The answer to your question, "How do I make the click event to show Cordinates values each time the pdf file is clicked." is you can't.

edited Jul 15 '21 at 23:08

answered Jul 15 '21 at 22:49

Joundill

6,828
12
36
50

Joundil, Thanks for getting back to me. Please can you provide sample code of what you mean by runing the code inside iframe. – Nancy Moore Jul 15 '21 at 22:58
How this is posted as an answer? This is just a comment not an answer. – Always Helping Jul 15 '21 at 23:00

score 0 · Accepted Answer · answered Jul 15 '21 at 23:07

Not sure if this solves your purpose but you can try creating an overlay on top of your iframe and then detect the click on it instead.

Something like:

$(document).ready(function() {
  var mouse = {
    x: 0,
    y: 0
  };
  document.addEventListener('mousemove', function(e) {
    mouse.x = e.clientX || e.pageX;
    mouse.y = e.clientY || e.pageY
  }, false);
  $(window).blur(function(e) {
    console.log("clicked on iframe")
    console.log('X: ' + mouse.x);
    console.log('Y: ' + mouse.y);
  });
  $(document).on('mousedown', function(evt) {
    console.log('X: ' + evt.pageX);
    console.log('Y: ' + evt.pageY);
  });
  $('.iframeWrapper').on('click', function() {
    console.log("clicked on iframe");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iframeWrapper" style="position:absolute;width:500px;height:900px;"></div>
<iframe src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"  width="500" height="900"></iframe>

Click event not properly displaying files XY cordinates using JavaScript/jQuery

2 Answers2