单击事件未使用 JavaScript/jQuery 正确显示文件 XY 坐标

Question

我试图在单击时显示 PDF 文件的 XY 坐标。

我参考了一个找到source 的解决方案，但下面仍有一些问题

我有两个问题：

1. 下面的代码部分有效，因为它有时会在单击时显示 X Y 值坐标。其他时候它不起作用，因为它只会将 X 和 Y 分别显示为 0 0。

2. 点击事件只起作用一次。如果您再次尝试单击 PDF 文件，则除非您再次刷新页面，否则不会显示任何值。如何让点击事件在每次点击 PDF 文件时显示坐标值。

代码如下：

$(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>

Answer 1

不确定这是否能解决您的目的，但您可以尝试在 iframe 顶部创建叠加层，然后检测对其的点击。

类似：

$(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>

Answer 2

An answer to the question you reference 回答了您的部分问题。只能检测到关注<iframe> 的第一次点击。

您需要在<iframe> 中运行代码，否则您将无法执行您想要的操作。

您的问题的答案，“我如何使点击事件在每次点击 pdf 文件时显示坐标值。”你不能吗？