Javascript 获取具有重叠元素的iframe的用户的鼠标坐标时出现问题_Javascript_Html_Iframe

Javascript 获取具有重叠元素的iframe的用户的鼠标坐标时出现问题

javascript html iframe

Javascript 获取具有重叠元素的iframe的用户的鼠标坐标时出现问题,javascript,html,iframe,Javascript,Html,Iframe,我有这个密码 <!DOCTYPE html> <html> <head> <style> iframe { width: 200px; height: 200px; } /* Playground by EThaiZone */ #parent { width: 200px; height: 200px; border:solid 1px #000; } iframe { width:100%; height:10

我有这个密码

<!DOCTYPE html>
<html>
<head>
<style>
iframe {
  width: 200px;
  height: 200px;
  
}
/* Playground by EThaiZone */
#parent {
  width: 200px;
  height: 200px;
  border:solid 1px #000;
}
iframe {
  width:100%;
  height:100%;
  border:0px;
}

#parent > button {
  opacity: 0.3;
  position:relative;
  float: right;
  right:10px;
  bottom:35px;
  transition: 0.5s;
}
#parent > button {
  opacity: 1;
}  
</style>
</head>
<body>
<div id="parent">
  <iframe src="get_mouse_info.html"></iframe>
  <button>Test Button</button>
</div>
</body></html>


iframe{
宽度：200px；
高度：200px；
}
/*埃赛亚区游乐场*/
#母公司{
宽度：200px；
高度：200px；
边框：实心1px#000；
}
iframe{
宽度：100%；
身高：100%；
边界：0px；
}
#父项>按钮{
不透明度：0.3；
位置：相对位置；
浮动：对；
右：10px；
底部：35px；
过渡：0.5s；
}
#父项>按钮{
不透明度：1；
}  
测试按钮

它包含一个iframe加载另一个页面（get_mouse_info.html）和一个与iframe重叠的按钮。我的目标是记录用户在iframe上移动鼠标时的鼠标坐标。我的问题是，每次用户开始在重叠按钮上移动鼠标时，iframe都无法拾取用户的鼠标坐标。这是鼠标跟踪器的代码

获取\u mouse\u info.html

<!DOCTYPE html>
<html>
<head><style>html, body {height: 100%;margin: 0;}</style></head>
<body onmousemove="myFunction(event)" style = 'background-color:transparent;'>

<script>
function myFunction(e) {
  var x = e.clientX;
  var y = e.clientY;
  var coor = "Coordinates: (" + x + "," + y + ")";
  console.log(coor);
}
</script>

</body>
</html>


html，正文{高度：100%；边距：0；}
函数myFunction（e）{
var x=e.clientX；
变量y=e.clientY；
var coor=“坐标：（“+x+”，“+y+”）；
控制台日志（coor）；
}

感谢您的帮助。谢谢

编辑：

忘了说我希望以后还能点击按钮指针事件：无；'（或类似方法）可能解决坐标问题，但不适合我的需要。谢谢

我认为你不可能同时拥有这两个：

Mousemove将事件移动到iframe
单击要转到该按钮的事件

向按钮添加

指针事件：none

将允许每个鼠标事件通过它。不管有没有它，您的事件永远不会同时出现在父页面和iframe中。出于许多安全原因

如果您可以控制这两个页面的代码，就可以让它们相互通信。这有点老套，但我不认为还有别的办法。您说过不希望父页面将鼠标跟踪数据发送到iframe。但是iframe能告诉父页面发生了单击吗

这就是它的作用：

parent.html

#parent>按钮{指针事件：无；}
测试按钮
var btn=document.querySelector（“按钮”）；
btn.addEventListener（“单击”，函数（）{
log（“单击按钮！”）；
});
//当iframe告诉我们发生了单击时，请相信它并自动单击按钮
window.addEventListener（“消息”，函数（e）{
如果（如数据==“点击”）{
点击（）；
}
});

获取\u mouse\u info.html


document.body.addEventListener（“mousemove”，myFunction）；
函数myFunction（e）{
var x=e.clientX；
变量y=e.clientY；
var coor=“坐标：（“+x+”，“+y+”）；
控制台日志（coor）；
}
//告诉家长发生了单击
document.body.addEventListener（“单击”，emitClickEvent）；
函数emitClickEvent（e）{
parent.postMessage（“单击“，”*”）；
}

显然，这个简单的示例会在单击iframe中的任何位置时触发单击（即使我们没有在按钮上方）。您也可以计算鼠标的位置以检查鼠标是否在其上方，但此解决方案是否符合您的需要？

您是否尝试在按钮上设置

指针事件：无

？那可能行得通。注意：点击不会被按钮拾取，这是因为我可以获得鼠标坐标，但不能点击按钮。我需要能够点击按钮后。好主意。我会在我的帖子中添加这一要求。如果你想点击按钮上的事件，我认为你不能同时做你想做的事情（好吧，我可以想出一种方法，但那会很快变得难看）。请问你的最终目标是什么？为什么在iframe中而不是在按钮上跟踪鼠标？也许我们可以为您的客户指出另一个（更简单的）方向goal@blex，基本上有两个网站（A和B）。网站B需要记录访问网站A的访问者的鼠标移动，这样网站（A）就不能劫持发送给B的结果。我考虑过使用AJAX，但后来意识到我找不到一种方法来辨别发送给B的坐标是否有效（网站A是否正在更改发送的坐标对以欺骗B）。至于为什么我需要确保A没有欺骗网站B，这需要更多的解释。谢谢！如果你有任何想法，请告诉我。

<style>#parent > button { pointer-events: none; }</style>

<div id="parent">
  <iframe src="get_mouse_info.html"></iframe>
  <button>Test Button</button>
</div>

<script>
  var btn = document.querySelector("button");

  btn.addEventListener("click", function () {
    console.log("Button clicked!");
  });

  // When the iframe tells us a click happened, believe it and autoclick the button
  window.addEventListener("message", function (e) {
    if (e.data === "click") {
      btn.click();
    }
  });
</script>

<script>
  document.body.addEventListener("mousemove", myFunction);
  function myFunction(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "Coordinates: (" + x + "," + y + ")";
    console.log(coor);
  }

  // Tell the parent a click happened
  document.body.addEventListener("click", emitClickEvent);
  function emitClickEvent(e) {
    parent.postMessage("click", "*");
  }
</script>